Transloadit appears to have only a Upload Form API. I wish to send the contents of my canvas to Transloadit like so:
data = canvas.toDataURL();
// POST this data to Transloadit
$.ajax({
type: 'POST',
url: 'http://api2.transloadit.com/assemblies',
// what goes here?
}).done(function() {
console.log('Done uploading!');
});
Is this possible?
It appears that Transloadit still does not support base64 data, but with newer browsers it's possible to take base64 data from a variable, convert it to binary, and send it in a file upload.
http://support.transloadit.com/discussions/questions/8587-how-to-upload-a-canvas-image-to-transloadit
Related
There seem to be lots of posts about this, but can't find a solution amongst them and I've hit a brick wall. Help, dear Stackers!
I'm writing a bit of code that lets users choose a profile picture, crop it and then save the cropped image on the server. I'm using the Cropper.js library to handle the actual cropping and have established that's working because I can display the crop live with this code:
var imageData = cropper.getCroppedCanvas().toDataURL();
var profileimage = document.getElementById('myProfilePhoto');
profileimage.src = imageData;
Now I want to send the cropped image to the server, and the best method would appear to be create a blob and Ajax that over to a php script to handle it.
cropper.getCroppedCanvas().toBlob(function (blob) {
var formData = new FormData();
formData.append('file', blob);
formData.append('uuid', '{a unique identifier}');
$.ajax({
type: 'POST',
url: '{the php script}',
data: formData,
processData: false,
contentType: false,
success: function (response) {
console.log('Upload success: '+response);
},
error: function () {
console.log('Upload error');
}
});
});
And at this stage I'm just getting my php script to var_dump($_REQUEST) so I can see in the console what the script thinks it's getting. However, the response is just sending back the default $_REQUEST objects like PHPSESSID and no file or uuid input.
What am I doing wrong?
Thanks in advance for any pointers.
If you are sending via post in order to see the request put this code
var formData = new FormData();
formData.append('file', blob);
formData.append('uuid', '{a unique identifier}');
formData.append('_method', 'PATCH'); <---add this and you're good to go
So the answer was annoyingly simple but frustratingly hard to find.
My server had an .htaccess rewrite rule which automatically changed www. addresses to the non-www version, and obviously I'd been dumb enough to include the www. in the URL I was calling, and it seems that's enough to strip off the $_POST data in these circumstances.
So FormData() and blobs are all red herrings here - it's just a redirect that's the cause.
So currently I'm working on a simple project where users gets to upload an image to server. Before I mention my problem here is how I'm doing it:
Client:
var dataURL = sendingcanvas.toDataURL("image/*");
var imagedatatosend = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
formdata = {
'image': imagedatatosend
};
$.ajax({
url: '../receive',
type: 'POST',
data: formdata,
encode: false,
success: function(result){
alert(result);
}
});
FYI: imagedatatosend size is lower than 5MB and contains exactly the file data selected.
Basically What happens Is that users select an image using <input type="file" tag Then I'm setting that selected file drawn in a canvas to convert it to base64 and send it to server.
Java Server:
String datareceived = request.getReader().lines().collect(Collectors.joining(System.lineSeparator()));
byte[] bImg = Base64.decodeBase64(datareceived.getBytes("UTF-8"));
FileOutputStream fos = new FileOutputStream("hi.jpg");
fos.write(bImg);
fos.close();
I think I might not need to explain what the code above does. But I'm facing some serious performance problem I mean It takes some huge time to write the data to hi.jpg file, even if I try System.out.println(datareceived); It takes seconds for my mouse click to respond on server console.
I don't know why is it happening, Do I need to send the image data as multipart or what?
All replies are appreciated and Thanks in Advance:)
Use XMLHttpRequest and FormData to append the file. It will be sent using multipart and chunked appropriately.
See: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
May it easy. But i can't figure it out.
I am using cordova camera plugin which give me direct base64 data like following..
navigator.camera.getPicture(onSuccess, onFail, {quality: 50,
destinationType: Camera.DestinationType.DATA_URL});
function onSuccess(imageData) {
$('#userFullProfileImage').attr('src', "data:image/jpeg;base64," + imageData);
}
It is working. Because it shows me the image after set source of userFullProfileImage. So encoding is correct.
Now, i am trying to save imageData in mysql and retrieve it via ajax.
After retrieve i match several line and found no mistake. imageData before save and imageData after retrieve seems to me same ( But save data omit all + character)
Retrieved image data can't decode. I use online base64 decoder too. But no hope. May be missing + character is for this reason.
I have checked all other character, line by line, both of imageData are same.
So now help me, which could be the possible reasons in my case.
If your + characters are being stripped, it sounds like it's going through a URL encoding scheme, which could convert + to spaces, which could then be ignored as whitespace by the base64 decoder. This could be happening as part of your AJAX request, which defaults to application/x-www-form-urlencoded.
If you say that you're going to submit url encoded data, then don't encode it, it will be incorrectly decoded by the server on receipt.
Try setting your content type in the AJAX request e.g.
$.post({
url: yourUrl,
data: JSON.stringify(yourBase64string),
contentType: "application/json",
dataType: "json"
});
Where contentType will tell the server that you're submitting your data as JSON and dataType will tell the server what format you expect the response to be in (so in this case the server should send its response in JSON, but you could also use a dataType of e.g. "text")
You could alternatively use a contentType of "text/plain" and remove the JSON.stringify but I have not tested this.
My problem was during send image data through ajax.
encodeURIComponent(imageData); //This solve my problem.
Encoded data is now safely save in database.
After retrieve from encoded data from database i have just used another function.
decodeURIComponent(encodedData); //same of imageData
Would it be possible to use html2canvas (This) to take a picture of the user`s screen but also upload the image, get the upload link and send it with ajax to the webserver?
if so, how can i do this?
Yes it is certainly possible to do such a thing.
Firstly use the html2canvas api to take a picture of the user's screen:
html2canvas(document.body).then(function(canvas) {
});
Secondly use the following function to convert the returned canvas image into a base64 encoded URL (defaults to png):
canvas.toDataURL();
Specification For canvas.toDataURL
Now construct a request to send your base64 encoded url to an image uploading server (I'm using Imgur as an example).
html2canvas(document.body).then(function(canvas) {
var dataURL = canvas.toDataURL();
$.ajax({
url: 'https://api.imgur.com/3/image',
type: 'post',
headers: {
Authorization: 'yourauthcode'
},
data: {
image: dataURL
},
dataType: 'json',
success: function(response) {
if(response.success) {
// Post the imgur url to your server.
$.post("yourlinkuploadserver", response.data.link);
}
}
});
});
After the image has been uploaded you can POST the URL of the uploaded image to your web server.
Specification for $.post
Specification for $.ajax
This isn't tested, but should work
function screenshot() {
html2canvas(document.body).then(function(canvas) {
// post using your favourite xhr polyfill, e.g. jQuery's
$.post('http://urlgoeshere.com', canvas.toDataURL('image/png'));
});
}
Then decode the result from base64 on the server side and put in a file
Using the example above, don't forget to add this to the base64url, otherwise it won't work :
var dataURL = canvas.toDataURL().replace(/.*,/, '');
More info here.
I need to pass a huge set of data with jquery ajax - image data. In which I can't use the usual way of uploading. Because the image data is from a canvas - literalycanvas. I've tried sent it but it's not get through. The data sample as follow: (pink is image data which is a lot longer than this and yellow is a truncate warning)
Well, I need to pass this data along the jquery ajax. So
Is there any possibility to do?
Can I write it to a cookie instead?
Can I pass it through the session?
Here's my code :
$.ajax({
url: 'print.php',
type: 'POST',
data: {
// convert the image data to base64
filename:'<?=$_GET[file]?>',//photo/2015-03-09/img_00215.jpg
image: lc.canvasForExport().toDataURL().split(',')[1],
type: 'base64'
},
success: function(data) {
$('.export_btn').html("<div class=\"alert alert-success\"><i class=\"fa fa-check\"></i> Printed</div>");
},
error: function() {
$('.export_btn').html("<div class=\"alert alert-danger\"><i class=\"fa fa-warning\"></i> Print error!</div>");
}
});
return false;
});
As you can see, the image: is sending a long line of data. Which is needs to send along the data. Any idea I can send this?