Getting cropperjs to post cropped image to server - javascript

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);

Related

Leaflet-Image() and Leaflet.print() not working

I'm trying to access a map webservice online. I want to export a map as a png ou jpg image.
I managed to display an online map with OSM. I followed instructions here. The next step is to save or export the map into an image.
I found this and this, and I tried both.
No need to say, it doesn't work. In fact I think the problem comes from me, I don't think I understood correctly how to use these functions.
Regarding Leaflet-Image(), I tried the following code :
leafletImage(map, function(err, canvas) {
// now you have canvas
// example thing to do with that canvas:
var img = document.createElement('img');
var dimensions = map.getSize();
console.log('dimensions :');
console.log(dimensions);
img.width = dimensions.x;
img.height = dimensions.y;
img.src = canvas.toDataURL();
document.getElementById('images').innerHTML = '';
document.getElementById('images').appendChild(img);});
An I got this error :
leaflet-image.js:87 Uncaught TypeError: layer._adjustTilePoint is not a function
The code seems strange to me. My goal is to export the map as an image, in the folder I wish. But I don't give a filepath or a filename...
Regarding leaflet.print(), I tried this :
var printProvider = L.print.provider({
method: 'GET',
outputFormat : '.png',
outputFilename: 'Desktop/carte',
autoLoad: true,
dpi: 90
});
var printControl = L.control.print({
provider: printProvider
});
map.addControl(printControl);
Honestly, I'm completely lost here. So if anyone had an idea or could explain to me how this works, that would be a great help.
At the end, I managed to access the image using its online path (http//...). Depending on the source, it may lead to an access problem, but it works fine with the online mapping service and the provided key. I am not using leaflet at all.
Thanks for the help !

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

Android file upload - wrong file name, native browser

There are a lot of questions about file upload with Android but most of them without answer and actually none of them are related with javascript or php.
I'm seeing strange behaviour when selecting a file to upload on Android (4.4.4) native browser (HTC One_M8) and what it gives me is this;
C:\fakepath\image:12045
"Fakepath" part doesnt bother me, what bothers me is that I cant get file name out of /input type="file"/ html tag.
I'm sending files with $.ajax and it works on Chrome, FF, Safari (desktop & iPhone), It works also on my M8 with Chrome, but not with native browser.
This is what I use to get selected files;
var filedata = document.getElementById("userFile");
formdata = false;
if (window.FormData) {
formdata = new FormData();
}
var i = 0, len = filedata.files.length, img, reader, file;
for (; i < len; i++) {
file = filedata.files[i];
if (window.FileReader) {
reader = new FileReader();
reader.onloadend = function(e) {
// showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("userFile[]", file);
}
}
And this is how I send them to handle.php
$.ajax({
url: 'handle.php',
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
}
return myXhr;
},
data: formdata,
dataType:'json',
cache: false,
contentType: false,
processData: false,
beforeSend: function(xhr, opt) {
$('#control-console').append($('input[type=file]').val());
$('input[type=file]').val("");
},
success: function() {
},
complete: function(podatki) {
$('#control-console').append(podatki.responseJSON.name);
console.log(podatki)
$.each(podatki.responseJSON.name, function(i, val) {
console.log(val);
insertFrame(val);
});
processing = false;
}
});
I haven't found any documentation about this so I don't really know if this is a bug in Android native browser or do I have to use different approach.
Has anyone faced the same problem and maybe found a solution ?
I have researched a lot and i have made a solution for android only. When you are in browser and iPhone, you can use your solution as it is working perfectly. But, android have a security issue. So, i had to make a solution for android.
You can follow my solution here.
What I have researched in last few hours is when file being uploaded is within the gallery for the android phone, due to security checks above problem happens. No file name, extension, size will be readable.
To workaround this:
1- Click on browse button, you will be taken to gallery of your device.
2- On right corner of gallery click Options image ("...") and Enable "Internal Storage".
3- Make sure the file you upload is in Internal Storage.
4- Access "Internal Storage" option while uploading.
5- File should show the correct name.

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.

jQuery equivalent to XMLHttpRequest's upload?

Working with HTML5's File API, the upload is made via an object called upload in the XMLHttpRequest. This is the tutorial I'm working with (and the Google cache mirror since it's down at the moment). This is the relevant part:
// Uploading - for Firefox, Google Chrome and Safari
xhr = new XMLHttpRequest();
// Update progress bar
xhr.upload.addEventListener("progress", function (evt) {
As you can see, to track the upload progress, the XMLHttpRequest object has a property named upload, which we can add an event handler.
My question is: has jQuery an equivalent?. I'm attempting to leave the code as clean as and cross-browser compatible as possible, for whenever Microsoft thinks it's a good idea (although it sounds like it will be in 2012 or 2013).
Here is what I came up with to get around the issue. The $.ajax() call allows to provide a callback to generate the XHR. I just generate one before calling the request, set it up and then create a closure to return it when $.ajax() will need it. It would have been much easier if they just gave access to it through jqxhr, but they don't.
var reader = new FileReader();
reader.onloadend = function (e) {
var xhr, provider;
xhr = jQuery.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function (e) {
// ...
}, false);
}
provider = function () {
return xhr;
};
// Leave only the actual base64 component of the 'URL'
// Sending as binary ends up mangling the data somehow
// base64_decode() on the PHP side will return the valid file.
var data = e.target.result;
data = data.substr(data.indexOf('base64') + 7);
$.ajax({
type: 'POST',
url: 'http://example.com/upload.php',
xhr: provider,
dataType: 'json',
success: function (data) {
// ...
},
error: function () {
// ...
},
data: {
name: file.name,
size: file.size,
type: file.type,
data: data,
}
});
};
reader.readAsDataURL(file);
The documentation for the jqXHR (the superset of the XMLHttpRequest that is returned from jQuery's .ajax() call) does not describe the update feature as being exposed, which does not mean it isn't exposed. This question, though, seems to indicate that upload is not exposed. The answer provides a way to get to the native XMLHttpRequest object.
In versions before jQuery 1.5 the XMLHttpRequest object was exposed directly, and so you can access any feature of it that the browser supports. This tutorial for building a drag and drop uploader does just that.
A search for jquery html 5 file upload brings up this plugin to do multiple file upload using the HTML 5 file API, but this plugin does not currently work in IE. If you don't want to use HTML 5 and instead do want to have support cross-browser now, there are other plugins you can look into for jQuery on the jQuery plugin site.

Categories

Resources