acornejo / jquery-cropbox Goto Github PK
View Code? Open in Web Editor NEWjQuery Cropbox plugin
Home Page: http://acornejo.github.io/jquery-cropbox/
License: MIT License
jQuery Cropbox plugin
Home Page: http://acornejo.github.io/jquery-cropbox/
License: MIT License
Currently dragging is not working in latest chrome version of iphone however it works on every other android device.
"dragging is not working";
By this I mean that for some reason when I assign image source after initial document load the image is only able to crop slightly in the appropriate direction.
Source will be provided upon request.
Thanks in advance,
Owen :)
img.src = self.$image.attr('src'); <-- 404 (Not Found) when canvas is used
Installed the image cropper in my test site and works fine in my computer, but doesn't work in my Android enviroment nor in iOS.
I have found issue in chrome ... se the home page http://acornejo.github.io/jquery-cropbox/ demo and open console there is a error in console
GET http://acornejo.github.io/jquery-cropbox/null 404 (Not Found)
jquery.cropbox.js:139
img.onload
Please help me out ..
Under IE compatibility mode, moving the image doesn't update x, y, h nor v and zooming causes to jump to the center (???) and setting values to NaN.
Feature request:
I'm about to finalize a project and tested the site, which integrates cropbox, on 10+ people with different backgrounds and technical skills.
What hit me was that many of them got confused while zooming the image. Majority thought that it would be easier to grasp if the image zooms in where the double-click (or pinch-to-zoom on touchscreens) takes place.
Is a change like this something to be considered (default or as an optional parameter)?
Hey,
I am using this plugin and so far it has been really great. The only thing is that I am using it on a responsive web app. When I shrink the screen it doesn't get smaller according to the screen. Do you have any inputs for it?
In version 0.1.2 there was a new bug introduced:
when you move an image and start zooming the x/y coordinates are reset to strange coordinates (seems like as if the new coordinates are half the old ones).
This worked in 0.1.1 (as in the demo), which took me some time to figure out as I thought the demo was the recent release ;-)
Hello,
I've been struggling a bit with the binding of multiple instances. Visually, the plugin works correctly, but since I need to bind it on the go, I have trouble with binding the data correctly.
In fact, when I have 5 instances of the plugin in one page, the data returned is always from the latest created cropbox.
On your example, you create 2 cropboxes by using the next selector, but since I cannot do that for my app, I have to identify them related to the id of the image and then bind it the right fields in the form.
Here's a link to a test
http://selim-benhhabbour.fr/cropbox/
Thanks for your help !
Hey,
Thanks for the awesome plugin. I would like to use it but I have some issues. The official demo is fully working in Chrome on my iPhone 4 (iOS 7.1.2), but not in Safari. I've attached a screenshot.
My other problem is that the touch drag is not working in my implementation (in Chrome), so the cropbox is loading I can use the zoom icons but it doesn't respond to the touch drag (the official demo is working well). Do you have a clue what could it be the problem?
Thanks!
Adam
I'm trying to crop image from select a file but after I user getDataURL() ,the image(base64) is not exactly as shown
= == ==== before ======
https://drive.google.com/file/d/0BwRNhUad2oRdSkJzUnNicnNKWnc/edit?usp=sharing
======== after ========
https://drive.google.com/file/d/0BwRNhUad2oRdN2Qzb3hjSHlKcEE/edit?usp=sharing
I'm rookie for programming
In init method for dragging an image there is a mousedown.cropbox event listener created. Within it mousemove.cropbox and mouseup.cropbox listeners are created. The mousemove.cropbox listener is closed after each mouseup.cropbox event, while the mouseup.cropbox itself is not. It results in duplicated cropbox events after each new dragging action.
Fix: $(document).off('mouseup.' + pluginName);
Hello,
I've been trying to use your zoom() and update() methods in a code snippet but so far it doesn't do anything. What did I get wrong ?
Here's the code snippet I used
$(function () {
var r = $('#results'),
x = $('.cropX', r),
y = $('.cropY', r),
w = $('.cropW', r),
h = $('.cropH', r);
$('#cropimage').cropbox({
width: 200,
height: 200
}).on('cropbox', function (event, results, img) {
x.text(results.cropX);
y.text(results.cropY);
w.text(results.cropW);
h.text(results.cropH);
});
crop = $('#cropimage').data('cropbox');
crop.zoom(1); // or zoom(0);
crop.update();
});
Thanks !
I cant use the getDataURL() or the getBlob() Methods.
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
in line 247 of cropbox.js -----> return canvas.toDataURL();
The need of client side image resize/crop arise when we want to decrease size of the file to be uploaded, but here the file uploaded to the server have the .png extension and is very bigger in size comparing to the dimensions of the image.
do you know any method to decrease the size of the file sent to the server and to change its extension to .jpg or .jpeg ?
lets say I have three images.
image1 , w=400, h=200
image2 , w=400, h=205
image3, w=400, h=400
if I feed each into a cropbox like this
$('myimage').cropbox({
width: 200,
height: 200,
zoom:10,
maxZoom:10
}).on('cropbox', function(e, data) {
console.log('crop window: ' + data);
});
image3 will zoomIn/zoomOut with a reasonable speed.
image1 wont zoomIn/zoomOut at all.
image2 will zoomIn/zoomOut veeeeeeeery slowly
Theres something not right with the zoom % calculation,
such that if the cropbox height is the same as the image height, it cant be zoomed.
hope you can help.
Cheers.
Hi Alex,
Great repository. Thank you for your work on this. Today, I started working on a web page that will allow a user to do the following things:
Your cropbox has the zoom / pan / crop ability I'm looking for—do have any pro-tips for what I might use for the other parts?
I have the ability on my website for the user to upload a profile picture and they can crop it, similar to facebook. The cropping itself works perfectly, but now I was trying to save the cropX/Y/W/H values into the db as well so that I can initialize cropbox again with these values for the user.
That is my code:
$('#user-profile').cropbox({
width: 150,
height: 150,
result: {
//cropX: {{$profile->profile_crop_x}},
//cropY: {{$profile->profile_crop_y}},
//cropW: {{$profile->profile_crop_w}},
//cropH: {{$profile->profile_crop_h}}
cropX: 100,
cropY: 100,
cropW: 0,
cropH: 0
}
}).on('cropbox', function(e, results, img) {
$('#profile-crop-x').val(results.cropX);
$('#profile-crop-y').val(results.cropY);
$('#profile-crop-h').val(results.cropW);
$('#profile-crop-w').val(results.cropH);
});
And no matter how I change the number of cropX, etc nothing changes about the way the picture is cropped initially.
Also for using the method setCrop
, there is no example for using any of these methods, so I was not quite sure how to use them properly. Would there be any way to add a simple example?
Anyway, thanks for the great work, otherwise love the plugin.
There seem to be a problem with offset or similar when changing size on the cropbox after zooming.
Reproduce:
Tested both in Chrome 32.0.1700.107 and Internet Explorer 11.
Here is a screenshot after repeating the steps above. Hope it is an easy fix, would come in very handy.
"Use false to disable controls."
I call $('img').cropbox({..., controls: false})
but controls appended anyway.
It's possible to prevent appending controls with $('img').cropbox({..., controls: ' '})
, but this looks like the hack.
I want to implement two modes: "edit on" and "edit off". In the first case user should be able to move and zoom the image with screen controls or mouse. In the second case controls and mouse should be disabled, and image should to hold in its last crop position and zoom factor.
There is remove
command, that should unbind controls. But this clears the crop and zoom values too. Is it possible just to disable controls?
Hey
When defining a new instance cropbox
and settings the results
object, I'm able to set initial crop properties. However I can't seem to do the exact same thing with the setCrop
function, right after I create the cropbox
instance.
Thanks
Hi,
great plugin, thank you.
I'd like to make zoom out's without limits, and fill background with an options color. Current version doesn't allow to zoom out when you reach the original size.
For example, if I want to make a squared image from a landscape one, sometimes I'd like to allow to fill in the top and the bottom white background, and i don't loose any part of the image.
Is there any way to identify that we are on lowest possible zoom so that I can execute another function?
Hi acornejo,
I just found another bug, which can be seen in the demo at http://acornejo.github.io/jquery-cropbox/, though I don't know if it represents the recent version. In IE10 and below the zooming is not working at all. If you click on any zoom button it will just move the image a little bit but the image stays at its original size.
In IE9 and IE8 the zooming bar does not even appear.
I have tested it in IE10,Chrome,Opera, and Firefox29.
In Firefox, the image dragging is very slow and it cripples. Could you please check on this? Thank you.
Below is some code that demonstrates a problem when you replace the image of a different size within a cropbox instance. It appears to me that the cropbox is initialized using the first image dimensions and when the second image is replaced, cropbox does in fact replace the image but the internal dimensions are not updated to the new image.
You can see for yourself by copying the code below into an html file and making sure to copy img.jpg and img2.jpg (Please make sure that they are different in size. Copy a tall image and a wide image for maximum effect.
<title>jQuery-cropbox</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/cropbox/jquery.cropbox.js"></script> <script> $( document ).ready(function() { //----------------------------begin cropbox------------------------------------------// // width, height, xOffset, yOffset var geometry=new Object(); var image = $('#cropimage'); // instead of hardcoding, read the cropbox's initial values from the image's html element attributes var cropwidth = image.attr('cropwidth'); var cropheight = image.attr('cropheight'); image.cropbox({width: cropwidth, height: cropheight, showControls: 'auto' }) .on('cropbox', function (e, result) { geometry.xOffset=result.cropX; geometry.yOffset=result.cropY; geometry.width=result.cropW; geometry.height=result.cropH; }); $("#cropbtn").click(function() { alert("w: " + geometry.width + "\nh: " +geometry.height + "\nx: " + geometry.xOffset + "\ny: " + geometry.yOffset); }); $("#insertbtn").click(function() { // Update image element src attribute image.prop('src', 'img2.jpg'); var crop = image.data('cropbox'); crop.update(); }); //------------------------------end cropbox------------------------------------------// } ); </script>P.S. I did try the update() method but it did not help, my workaround has been to create a new instance for each image unfortunately.
Hey,
When I am trying to use pinching functionality it zooms a lot. pprdev.onjumpstarter.io/resapp try using it on your mobile. When you go next and select an image try pinching it for zooming. You will see what I am saying.
Thanks in advance for you help.
Hey,
I am making a web app in which user can select image and then drag or zoom the image. For example, the user uploads an image and then he drags it or zooms it after that he thinks to upload another image. For that he uploads another image. Now when the user is uploading a new image the new image is having some top: -X value. I am not able to find where it is.
I have tried removing the cropbox instance from the image and then re-instantiate it on the new plugin. But it isn't working. Can you look into it?
Regards,
Mohsin
Good afternoon,
I would like to crop an image and then display the url of the image in an input field. I am now experimenting, but I just can't get it done by the demo.
I have followed the code of the demo but the image isn't displayed. Can you help me?
Here I have a link to my fiddle:
greets,
William
Hi dude, I do not exactly know if this is a bug or the plugin should work in this way but when I call remove() function for removing the crop instance from an image element, not only the crop instance but the image element also get remove.
This is how I am doing it.
$('#youImageId').cropbox().remove();
I am doing this because I want to create a new instance on same image but after deleting the previous one.
Can you please tell me what is going wrong here?
Thank you.
Is it possible to provide a 0.1.9 release tag to be able to get dependencies via bower?
Thanks for the great utility. I'm wondering about the behavior of pinch in/out on touch devices.
It seems like pinchout should zoom IN and pinchin should zoom OUT? This is at least how the built-in IOS photo cropper works, and I think is more intuitive.
Let me know if I'm missing something... could be my hammer.js setup. Otherwise make it a config setting?
Hi add a default reset control that will bring the image back to zero zoom.
Is there any way to set initial position of crop?
For example, we may want to store crop coordinates in DB and re-crop image after some time.
I'm trying to allow the user to select a file and apply the cropbox to that. There was a short discussion about it #19, but I don't quite see how to set it up. Can you give an example of how to do it? I would greatly appreciate it. Thanks!
I am doing this:
$image.cropbox({ width: 400, height: 400, zoom: 3, maxZoom: 1.5 }).on('cropbox', function(e, data) {
console.log(data);
});
I see the data updating as I drag/zoom. Then I have this event:
$('#croppingModal').unbind().on('click', '.btn-primary' , function(e){
e.preventDefault();
ph.crop = $('#croppingModal img').data('cropbox');
ph.crop.update();
console.log(ph.crop);
ph.drawCroppedImage($('#croppingModal img').get(0));
ph.$el.trigger('update.photograph');
$('#croppingModal .btn-default').click();
});
which returns the default cropping values... What am I doing wrong??
Hi, I've been using your plugin and I'm quite pleased with it.
Lately, I've tried testing my site using different browsers.
I've noticed that once you zoom the image in an IE10 browser, the image is distorted and a whitespace is displayed.
Please advise on how to solve this issue.
Hi, I'm trying to make work cropbox having an image displayed from a base64
url linkeed to the src
of the image. unfortunately cropbox
doesn't show the image and either calculate the dimension of the image. There is any workaround for this?
It doesn't seem possible to zoom in further than the size of the original image. I.e. having an 400x400 pixels image in a 200x200 pixels crop window will allow the max zoom to 2x, not to a defined number of max zoom like 5x or similar.
I re-size the image server-side to make it smaller (as I'm using effects and send the image to the client from time to time) for faster retrieval. Destination size could be about 800x600. Cropping is done on the original image server-side, so image quality is not that important in my case.
Thought about letting the browser re-size the image using CSS like -> style="width: 1400px; height: 1200px" as a workaround. It seems that only the height is allowed to re-size using cropbox, width is still unchanged, resulting in a stretched image.
Would it be possible to make cropbox zoom further into the image, or is there a workaround similar to the one I tried?
Hey,
As you know about my application, what i am trying to do now is that if the height of the image is larger than its width then I am rotating the image by 90 Degree and then applying cropbox on it. But the thing is the image isn't contained the parent div. I am attaching the link and I am also attaching the image you should upload to see the problem I am talking about.
Hope to get an insight on it.
Regards,
Mohsin
pprdev.onjumpstarter.io/resapp/#/selectImage
Currently dragging is not working in latest Chrome when Hammer.js 2.* is loaded.
At least should be mentioned via docs.
Hi, Could you provide me an example of image rotation with custom controls, Please?
Hi
I am replacing the image src
with a new image url that has different dimensions but I can't seem to get cropbox to reload with the new image.
Is there an easy way to achieve this?
Cheers
I'm trying to create a canvas painting frame on top of the cropbox image, but unable to draw dotted lines (or anything else) with CSS in that area.
Something in the lines of the one at the following site (after uploading an image):
http://www.hellocanvas.co.uk/order
A fast test I did was just to do the following, which I had hoped should add a dotted line at the top of the draw area:
$("#cropimage").css("border-top", "1px dotted #ff0000").css("z-index", "9999");
Would be great with some feedback on how to be able to get dotted lines and filled areas on top, if possible. Do you know anything about this?
I am trying to zoom or drag the image using this plugin which is working very well.
But when when the user go next and then come to the previous step it doesn't work.
If you go this url http://pprdev.onjumpstarter.io/resapp/#/selectImage and upload the image I am attaching and then press next and then back you will see what I am trying to say.
truesize like jcrop?
Hi,
i'm create phonegap app and part of the app is taking picture, and then drag, resize before crop.
after taking picture and add it to the DOM, i cant drag the image vertical.
after zoom the image i can drag vertical, but only to the area the hides after the zoom.
if i use image not from the phone, everything fine, there is only problem with base64 taken picture, and saved photo in the phone.
Hey,
Can you tell me how to remove the instance of cropbox from the image? This is my code.
$('#postcar_image').remove();
but it is not working.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.