acornejo/jquery-cropbox

jQuery Cropbox plugin

jquery-cropbox's Issues

Rotation, grayscale, upload and save

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:

1. Upload an image
2. Rotate image
3. zoom / pan / crop to a preset size, say, 640 x 480
4. Save the result as a grayscale png.

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?

Dotted lines on top of cropbox

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?

Zoom in where double-click takes place

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

getDataURL() Error

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

my code: http://jsfiddle.net/JLTindex/z1n3Lncj/3/

IE10 Zoom

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.

Here's the normal image:

Here it is when zoomed:

(Desired outcome)

Please advise on how to solve this issue.

No zooming or dragging

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.

Can't to disable controls

"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.

hammer.js 2.* support

Currently dragging is not working in latest Chrome when Hammer.js 2.* is loaded.
At least should be mentioned via docs.

Zooming with version 0.1.4 is not working in any IE

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.

jquery-cropbox/null 404 (Not Found)

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 ..

No support for IE9 and 8

getDataURL() usage

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:

1. works without getDataURL:
   http://jsfiddle.net/Peeters_William/3s8tno56/4/
2. doesn't work with getDataURL:
   http://jsfiddle.net/Peeters_William/3s8tno56/3/

greets,
William

Remove function deletes the image element

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.

Image dragging too slow in Firefox

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.

issue with height and width

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

Touch support not working

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.

Increasing max zoom

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?

Pinching not so good

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.

Default reset control

Hi add a default reset control that will bring the image back to zero zoom.

IE9, IE10 issue

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.

Image x/y positioning wrong after zooming

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

Set the initial cropping area doesn't seem to work

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.

Rotate Image

Hi, Could you provide me an example of image rotation with custom controls, Please?

File Size.

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 ?

Zoom and update methods ?

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 !

Wrong offset after zoom and size change

There seem to be a problem with offset or similar when changing size on the cropbox after zooming.

Reproduce:

1. Go to the demo at http://acornejo.github.io/jquery-cropbox/
2. Zoom in a bit (press + sign 5 times or similar to see it easily)
3. Change size of cropbox (default to 300)
4. Now the zoomed image is not centered anymore and seem to have a bad offset

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.

Having trouble creating multiples instances

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 !

Official demo doesn't work on iPhone 4 Safari iOS 7

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

Allow Zoom Out without limit (filling background with color)

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.

problem drag vertical after took image with camera

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.

iPhone dragging issue

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

Example for user selected file

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!

if the cropbox height is the same as the image height, it cant be zoomed.

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.

Initialize cropbox with an base64 Url

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?

Canvas support

img.src = self.$image.attr('src'); <-- 404 (Not Found) when canvas is used

getDataURL() not exactly as shown

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

Can't use the new 'setCrop' function

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

not closing the mouseup.cropbox event listener.

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

truesize like jcrop?

truesize like jcrop?

Remove the Cropox instance

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.

Ability to disable controls without removing the crop frame.

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?

Replace Image

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

Pinch In to zoom (vs out)

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?

Replacing image using same cropbox instance - internal problem

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>

Display crop coordinates Insert image attribute

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.

determine lowset zoom

Is there any way to identify that we are on lowest possible zoom so that I can execute another function?

0.1.9 release?

Is it possible to provide a 0.1.9 release tag to be able to get dependencies via bower?

Initial crop position

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.

responsive cropbox

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?

result reseting for no reason.

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??

Cropbox is not being removed

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