JQuery Cropper is a library for cropping image after upload. There is no example provided on any blog or github. Can anybody provide some example for this library?
Please help.
That’s going to depend on your view layer. If you are using Blaze then you’ll call the cropper method on a DOM node from within the onRendered callback. If you are using React then I’m not sure this plugin will work since it appears that it may make changes to the DOM and React won’t deal with this well.
LOL, I’ll see what I can do. Can’t guarantee anything. Time is money my friend 
1 Like
Do you belive in sleeping?
Sure when necessary…
I wish I could ask this question in your dreams where you are not interested in making money. Inception kind of thing
Haha, I never said I would charge you! I was just saying I can’t guarantee I will be around at any point when you return with questions.
Yes right, So here is mine question, can we crop image without uploading image using cropper js?
Can you describe your use case? Are you creating an interface by which the user can adjust adjust an image, or are you just looking to crop the image to certain dimensions before uploading it?
Actually, its like uploading pic and while uploading I want to make it in the desired format. Same like Facebook.
So basically you can use a library such as image-manipulation to modify the File which is returned from a file input. Or you could use a solution such as Cloudinary where you just upload the file as is and then use their API to get a URL for the image what will send a properly manipulated image that is also cached in a CDN.
You could also use a combination of both. First scale the image down to a dimension so the file size that gets uploaded isn’t huge and then use cloudinary API for thumbs and other transformations you might need.
Actually, I tried with the same approach but my web page gets reloads when I select the image.
That doesn’t make sense to me. The page shouldn’t reload when you select an image. It may if you submit the form and fail to call preventDefault() on the event, but not just because you selected an image.
I used this method but does not seems like it works.
Not sure what to tell you. There’s not much more I can suggest without access to code or code repositories that have a reproducible issue.
Here is my code for uploading, please have a look at it.
Template.create_new_group.events({
'change input[type=file]': function(e, t) {
var files = e.currentTarget.files;
e.preventDefault();
if (e.currentTarget.files && e.currentTarget.files[0]) {
var file = e.currentTarget.files[0];
if (file) {
var uploadInstance = Images.insert({
file: file,
streams: 'dynamic',
chunkSize: 'dynamic'
});
uploadInstance.on('start', function() {
// template.currentUpload.set(this);
});
var groupname = $('#groupname').val();
var groupname = groupname.trim();
var groupDesc = $('#discription').val();
var groupDesc = groupDesc.trim();
Session.setPersistent("draft_group_name",groupname);
Session.setPersistent("draft_group_desc",groupDesc);
uploadInstance.on('end', function(error, fileObj) {
if (error) {
window.alert('Error during upload: ' + error.reason);
} else {
// window.alert('File "' + fileObj._id + '" successfully uploaded');
Session.set("imagePath",fileObj._id+'.'+ fileObj.ext);
// alert(Session.get("imagePath"));
// document.getElementById("my_image").src=fileObj.path;
}
// template.currentUpload.set(false);
});
// uploadInstance.start();
}
}
},