javascript based opencv not working with dynamic image - javascript

I'm using a javascript based opencv (See: https://github.com/mtschirs/js-objectdetect)
and it works perfectly with live video using canvas and html5.
When I try to detect using a dynamically saved image it fails, but works if I hard code an image.
The following (static image):
<img id="image" src="download.png"></img>
works fine, but using
var dataURL = $("#canvas")[0].toDataURL("image/png");
$("#image").attr('src', dataURL);
or using an ajax call which saves the image onto the server and returns the url path
$.ajax({
type: "POST",
url: "saveImage.php",
data: {
img: dataURL
}
}).done(function(o) {
$("#image").attr('src', o);
});
both fail. They both display an appropriate image.
the detection function is
$("#image").objectdetect(..., function(faces) { ... }
Executes, but returns array length 0 unless I use the static image

Had one of my co-workers figure it out. Image didn't load by the time it was being computed.
jQuery.ajaxSetup({
async : false
});
I had originally tried an $(element).load(function() { .. }) didn't seem to work but it seems it was a timing issue with the ajax.

Related

How can I upload user-generated svg to the server?

Having spent three days researching and failing to enable user-generated svg upload to the server, I'm completely stumped.
I've built an HTML and Javascript site for users to create a basic model of a vehicle, by entering dimensions into a form.
Those dimensions are then used to edit each svgs 'x' and 'y' coordinates.
I've had success with converting the nested svg to base64 and then downloading to the users filesystem using a button (although it isn't working on JSFiddle), and also experimented with saving the file to local storage.
The output javascript has proven to work absolutely fine, but I just can't figure out how to get that output onto the server in any way.
I'd like to be able to have a user submit their edited svg to the server, where I can then reference it on another page.
I'm fairly unfamiliar with server side code and practise but so far have tried the common suggestions such as:
$.ajax({
url: ajaxurl,
type: 'POST',...
as well as various iterations of PHP code to receive the svg.
Here's the (mostly) working Fiddle of my site so far.
JSFiddle
Edit for better context
This is a very simplified version of the nested svg that I'm trying to export to server
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" id="Layer_1">
<rect id="rect1"/>
<rect id="rect2"/>
</svg>
Export is attached to this button
<button id="downloadSVG">Download</button>
And then the export script
<script>
function downloadSVGAsText() {
const svg = document.querySelector('svg');
const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML)));
const a = document.createElement('a');
const e = new MouseEvent('click');
a.download = 'download.svg';
a.href = 'data:image/svg+xml;base64,' + base64doc;
a.dispatchEvent(e);
}
const downloadSVG = document.querySelector('#downloadSVG');
downloadSVG.addEventListener('click', downloadSVGAsText);
</script>
Simplified JSFiddle
What I'm completely lost about is how to post the nested svg to the server, so that users can edit or use it later.
So far I understand that I will need Ajax to pass the Base64 image from javascript to PHP file on the server, then the PHP file will place the image on to the server. I just don't seem to be able to make it work. The main issue is how to get the generated Base64 to PHP. The rest I'm happy to work out.
This is a very general question. I think using AJAX is a good way to go. You should be able to just put the SVG in a POST body:
$.ajax('url',{
'data': svg.outerHTML,
'type': 'POST',
'processData': false,
'contentType': 'image/svg+xml'
});
Then use $svgString = file_get_contents('php://input'); to get the contents of the body, this saves you a lot of encoding and decoding. The rest is up to you.

Getting cropperjs to post cropped image to server

I'm trying to integrate Chen Fengyuan's 'cropperjs' into a website I'm designing and I have the interface working fine with the crop box doing as it should. However, my limited knowledge of Javascript and jQuery has brought me to a standstill.
What I would like to do is click on a button under the canvas (similar to the Get Cropped Canvas button) and have the cropped image posted to the server using a simple jQuery AJAX call.
I don’t need a preview of the cropped image as the image is already previewed on the interface. However, I can't seem to do this successfully because every time I try and use the methods provided in the 'cropperjs' documentation, I get a browser errors like:
ReferenceError: cropper is not defined
I've tried various methods and have seen a lot of solutions online but I just can't seem to get it right. I know I'm doing something very wrong but because I don't understand Javascript and jQuery well enough. I'm really struggling. The documentation mentions initialising with the Cropper constructor but I don't know how to do this and I'm guessing this is where my problem is? Can anyone help?
I've manage to painfully solve this myself so for anyone who's interested, here's the code I used:-
var $image = $("#image");
var cropper = $image.cropper();
var baseURL = window.location.protocol+'//'+window.location.host;
var pho_id = $("input[name=pho_id]").val();
var mem_id = $("input[name=mem_id]").val();
var photopath = $("input[name=photopath]").val();
$image.cropper('getCroppedCanvas').toBlob(function (blob) {
var formData = new FormData();
formData.append('croppedImage', blob);
formData.append('pho_id', pho_id);
formData.append('mem_id', mem_id);
formData.append('photopath', photopath);
$.ajax(baseURL+'/path/', {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log('Upload success');
},
error: function () {
console.log('Upload error');
}
});
}, 'image/jpeg', 0.8);

How to display a PDF in iframe with ajax after calling a servlet

I have a problem when I want to display a PDF in an iframe (using the attribute src).The PDF is never downloaded from the browser.
I need to use an ajax call to display a message in a popup in some cases.
The code of the servlet that generate the PDF works because currently we use this directly in the src attribute of the iframe.
<iframe src="myServlet" />
But when I use the servlet with a ajax call, and I want to add the content of the PDF in the iframe, it doesn't work.
I don't know why.
This is an example of the js :
$.ajax(
{
url: "myServlet",
...
complete: function(data) {
var blob = new Blob([data], { type: 'application/pdf' });
var downloadUrl = URL.createObjectURL(blob);
$('#myframe').attr("src", downloadUrl);
}
}
);
I try with chrome and I have the error:
jquery-2.1.3.js?ts=13012017:3 GET data:application/pdf;base64,blob:http://localhost:8180/d21d82b6-8254-4a38-907e-129b3ac037fa net::ERR_INVALID_URL
I can see that I have the data as a binary file:
%PDF-1.4
%����
3 0 obj
<>stream
x��{PU��^A��e�(�......................
...................
startxref
38448
%%EOF
Sorry but I don't have the code here (at home), but I think that the explanations are fairly clear.
I don't know why the PDF cannot be downloaded if I use ajax with iframe and attribut src.
Do you have an idea?
Thanks.
Fred
This do the trick for me.
$.ajax(
{
url: "myServlet",
...
complete: function(data) {
$('#myframe').attr('src','data:application/pdf;base64,'+data);
}
}
);
Also, you should encode the ajax ans this way base64_encode($data).
I hope you find this helpful.
In Javascript, to encode the ajax answer you should do it this way:
var enc = btoa(data)
If you have problems, you should try this:
var enc = btoa(unescape(encodeURIComponent(data)))
Then
$('#myframe').attr('src','data:application/pdf;base64,'+ enc);

How to get screenshot of complete HTML page using HTML2Canvas

I am using HTML2Canvas to get image of complete HTML page .I am trying to save that image in PPT on a button click.
i am able to save image in PPT.
But the saved image content is getting overlapped and the alert which i have used here is taking around 1 min to show .
when i did debug i got to know that problem is with HTML2Canvas.
i have used many third party charts in my page like Google charts.
can you please suggest me any alternative for HTML2Canvas as i saw there are few limitations in HTML2Canvas when we use cross-origin content.
$('#PPTExport').click(function(e) {
var canvas = document.getElementById('canvas');
var target = $('#loadImageHeader');
html2canvas(target, {
onrendered: function(canvas) {
var data1 = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
alert(data1);
$.ajax({
url: "savechart",
data:{
image1:data1
},
type: 'POST',
success: function (data) {
if(data=="success")
{
$("#formid1" ).attr('action','savechartDownload');
$( "#formid1" ).submit();
}
}
});
}
});
});
I Have solution for this problem.
You can try this out..
html2canvas([document.body], {
useCORS: true,
proxy: "Server",
onrendered : function(canvas) {
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
Server is server url of node.js or any language you can write.
Example Node.js : https://github.com/niklasvh/html2canvas-proxy-nodejs
read more here: Can't capture google map with html2canvas
and Here: Cross-origin image load denied by Cross-Origin Resource Sharing policy

Filepicker.io - base64 decoded image not viewable

I'm using filepicker.io to export an existing file (FPFile) to a given destination.
I'm using the existing FPFile as sort of a small temp file, so the export happens quickly. Then, after the export is complete, I'm, trying to write back to the file I just exported with some image data (base64 encoded).
The problem is, after I've written the data, the image isn't viewable. The image doesn't display in Firefox, Chrome, or IE.
I can actually open the image in Photoshop and it displays fine, so I know the data is being written. There just seems to be sort of error in the file after it has been written to. Maybe I'm just doing something stupid.
Here's my code:
var fpfile = { url: 'https://www.filepicker.io/api/file/ermKMZgVSu2GCEouu4Lo',
filename: this.curFile.name, mimetype: 'image/jpeg', isWriteable: true};
filepicker.exportFile(
fpfile,
function(FPFile){
var data = canvas.toDataURL('image/jpeg');
writeData(FPFile, data);
}
);
function writeData(file, data){
filepicker.write(file, data,
{
base64decode: true
},
function(FPFile){
console.log("Write successful:", FPFile.filename);
},
function(FPError) {
console.log(FPError.toString());
},
function(progress) {
console.log("Loading: "+progress+"%");
}
);
}
When you use the toDataURL call, you include the prefix, for instance
data:image/png;base64
This needs to be stripped from the actual contents of the image before doing base64 decoding

Categories

Resources