Develop Reference

Download Image from URL & Post to API via AJAX

There are a number of images that I'm displaying on our website. In addition, we allow users to upload images or preview images from an external source URL. All images on the site are available via standard <img> tags, where the src is set to the relevant image URL.
When an image is clicked, I'd like to take the image and post it to an API, which will then process the image and return a result:
Base64 Encode:
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
}
AJAX
$("#img").click(function () {
var base64 = getBase64Image(document.getElementById("img"));
$.ajax({
url: post_url,
type: 'POST',
data: { "img_data": base64 },
dataType: 'jsonp',
processData: false,
contentType: false,
success: function () {
...
},
});
});
There are a couple of issues that I'm aware of and probably more. I'm not technically "uploading" an image, because most of the images are already being displayed on the page. I'm also encoding in Base64 to send to the server, but I really need the data decoded in UTF-8. I suppose that I can do that server-side, but would be nice to have it done here.

I think in this scenario you should have two flows: one to the image the user upload, and one to the image from external resource.
In the flow to the images from external resource: your system knows the external URL to the images, so you can pass the URL in the post request, then in the server you download the image and manipulate it as you want.
And the flow to the image selected by the user, you post the file to the server and manipulate it as you want.

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 render body element in Javascript

I am using html2canvas to take a snapshot of my webpage and paste it somewhere in my server.
I am trying to Render the body element and restrict canvas size to 300x300px
This is the code that is doing to trick
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 300
});
And this is the website where the demo is available.
My problem is that I am new to html2canvas and I couldn't figure out how to paste this code and use it on my local file.
I would really appreciate it if someone can give me steps or explain for me where and how to use this code to make it screenshot my local webpage.

I'm afraid but I do not really understand what you want to do.
The above code should already take a screenshot of your webpage. You just have to include the html2canvas.js and paste the code in your main JavaScript file or your documents head.
<head>
...
<script src="js/html2canvas.js"></script>
<script>
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 300
});
</script>
</head>
Saving that image to your server is a little tricky.
HTML2Canvas renders the image via the Data URI scheme.
That means, an image file is created during the runtime and then written to the canvas (via drawImage()).
To get that data back, you may call the toDataURL() function:
html2canvas(document.body, {
onrendered: function(canvas) {
var imageData = canvas.toDataURL();
},
width:300,
height:300
});
In my case, that imageData variable contains something like data:image/png;base64,iVBORw0KGgoA....
That's an base64 encoded string of the image data with mime-type image/png.
To save that image to your server, you need something that is able to write to the server. Since JavaScript runs clientside (in your browser), it's not allowed to do so.
You could send that data to a PHP file using an AJAX call:
html2canvas(document.body, {
onrendered: function(canvas) {
var imageData = canvas.toDataURL(),
request = new XMLHTTPRequest() || new ActiveXObject("Microsoft.XMLHTTP");
request.open("POST","saveImage.php",true);
request.setRequestHeader("Content-type","image/png");
request.send("imageData=" + imageData);
},
width:300,
height:300
});
The content of that PHP file may look like the following:
<?php
if($_SERVER["REQUEST_METHOD"] !== "POST") die;
$fp = fopen("path/to/image/folder/" . time() . ".png","w");
fwrite($fp,base64_decode($_POST["imageData"]));
fclose($fp);
?>
Actually, that's the way I would do it. But the code is untested. If you have any questions, please feel free to ask!
EDIT:
Not sure if the content-type of image/png is correct or if it has to be transferred as text/plain or something like that.

javascript based opencv not working with dynamic image

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.