fengyuanchen / cropper Goto Github PK

如何得到裁剪之后的照片

Feature request: I would like to have a fixed crop-box and drag the image around instead of moving the crop-box.

Hi Feng, awesome cropping tool you made here 👍

Is it possible to define where the cropped area is? so when I've cropped my image, I can load the same image later and then render the same selected area.

Hi,
I have a question about Selector area,
Always Selector area width = height, (square structure)
is it possible to built "width not equal height structure" (wide selection) .

pls help me to get out here!
Thanks a lot.

Hi,

I was testing this plugin just now and noticed that it is not working anymore for me. Tested on Google Chrome and Mozilla.

Tested here: http://fengyuanchen.github.io/cropper/#overview
Is this demo working for you?

When the cropper is enable the image just disapear. It was working just fine this morning but not now. I've noticed that you updated the git project about four hours. Maybe something has gone wrong.

Thanks!
mfBottoni

It would be nice to have events before the cropper was fully build, something like

$(elem).cropper({
    beforeBuilt: function() {
        $(this) // refers to cropper
    }
});

or

$(elem).cropper({
// config here
}).on('cropper.beforeBuilt', function(){
    // Random code
});

Actually I would gladly see both of these :)

Hi, I have a page with some preview images and when an image is clicked a full resolution one is loaded and the cropper is applied to it with a default position and size if there isn't crop data in the preview or with the data if present. Now everything seems to work fine but all crop areas keep the size and position of the first loaded image no matter which one is and no matter if I modify x1, y1, width and height with setData.
The weird part is that if I debug the javascript, make it stop and proceed manually step by step everything works fine and correct position and dimension are applied.
Have you got any guess on what's happening?

It would be handy to know the image resolution, so that you can do calculations on the crop.
For example to express the dimensions as a percentage. eg: Xcrop: 52%, Ycrop: 33%
Note: I just added image: this.image in the output method, ie:

            data = {
                x1: dragger.left,
                y1: dragger.top,
                x2: dragger.left + dragger.width,
                y2: dragger.top + dragger.height,
                height: dragger.height,
                width: dragger.width,
                image: this.image
            };

Does the job.

有没有考虑加触摸屏手势支持？

Are you tagging your releases on Bower?

Like this:

git tag -a 1.2.1 -m "Tagging 1.2.1"

I'd rather not do "cropper": * from bower and reference a specific version instead. Right now, bower can't find any specific versions.

Theres a nice article explaining this: (step 4) http://www.polymer-project.org/articles/distributing-components-with-bower.html

Hello,

Experiencing such problem, it seems that some classes are overlapping. Just plain foundation set up with cropper. The cropper-dragger shows image squeezed in width, although the underlining image is good

Made a package that reproduces this issue here:
http://fuksito.com/cropper-foundation-bug.zip

I think you should do more config max width and max height

I have a list of images, and the function looks like this:

$('.image_list').bind('click', function() {
$('.cropper-container img').attr('src', '{new image}');
$(".cropper").cropper("setData", {
x1: $("#dataX").val(),
y1: $("#dataY").val(),
width: $("#dataWidth").val(),
height: $("#dataHeight").val()})
});

and the html: img class="cropper" src="{current_image}">

basically what i want is to apply the data{x1,y1,width,height} settings of the previous image into the newly added/changed image, but it seems everytime new images is loaded the data{x1,y1,width,height} reset into its default setting.

Thanks,

Handles are not touch friendly... or even mouse friendly as the borders are very awkward. The drag zone should be optionally the image zones; the cropping area is divided into 9 zones already : resize the image when dragging an edge zones, and translate when dragging the center zone.

This solution would solve part of issue #11, too.

Hi, testing your avatar demo (awesome script btw, just what I need) but, i select an image, it shows the crops, hit save, and it doesn't save, previewed image is then original non-cropped image. no errors produced... avatar directory creates, but no files.

A user can crop as small as they want. It would be nice to be able to set a minimum cropped image size to avoid blown out resolutions.

Hello there. I can't seem to get the "destroy" method working. The function is attached to a global variable much as in the example ("$image" assigned to an image). When I call the "destroy" method in the console (attached) I just get the selected element returned, and the crop still works. Just wondered if anyone had any pointers

Demo doesn't work unless i strip slashes on $data:

public function setData($data) {
$this -> data = json_decode(stripslashes($data));
}

As seen on jquery-upload-crop, it would be nice to start a new selection when clicking outside of the selection zone.

For example, to create a new selection you have to drag the box to the point where you need it, then focus the mouse into the corner, then drag it out. This is a little bit fiddly, especially when repeating this task several times over.

I'll take a look at the code and see if this is something that can be added easily.

It would be a great addition if you implement a solution for very large image inside a fixed container. See Jcrop's box sizing method.

Use case:
Let's say a user uploads a file to the server. Once uploaded, you open up the modal and display the image inside the modal so the user can select desired cropping selection.

downloaded "examples/crop-avatar" and uploaded to my server but when pressing the save button after selecting the crop area "Submit error!" appears .. how to fix this please help...

I like the plugin a lot and prefer it to a lot out there.

However, When I try to initialize it on a canvas, it fails, then I found out it doesn't work with canvas (or any other element.

Can it be extended, to have support for canvas element?

I like originality, I won't want to modify the source. Go ahead?

Hi there,
I found a bug in the main demo, when you activate the Free ratio, the preview gets the same proportion as before, should not call the function setPreview() when the function is executed setAspectRatio()

Great job by the plugin

I can´t seem to make a working preview. How should the img preview tags be configured to be updated?

$('.img-container img').cropper({
aspectRatio: 16/9,
preview: ".img-preview",
done: function(data) {
console.log(data);
}
});

This is my code and the preview image has this tag.

This looks like a great plugin. I'm eager to use it. However, I'd like to know if this has been tested on various browsers. I'm need to know which versions of Internet Explorer work with this plugin. It would be helpful to mention it somewhere on the site.

... delete this.. i'm sorry

I take a screenshot on my mac and when i try to upload i get

{"state":200,"result":null,"error":"File upload failed! Error code: 4"}

Hi, thanks for your nice plugin!

Is it possible to have a "ratio free" cropper, so that the selection zone is not tied to a ratio and can be freely re-sized...?

I am displaying the preview inside a Bootstrap dialog and if the image is not square, it is given a left offset :

I am trying to follow along with the documentation and I keep getting lost I am trying to input image file via php (I have done that already) then crop it using cropper then save it. However I cannot seem to figure out an example anywhere that goes from start to finish, everything is just pseudo code. Thanks for any info!

I want to create a crop area with an aspect ratio of 13/9 centered on your demo image. It should look like this:

The code looks like this:

$image.cropper({
    aspectRatio: 13 / 9,
    data: {
      width: 1040,
      height: 720,
      x: 120,
      y: 0
    }
});

When the image is scaled down, there are some rounding issues which lead to the width value being just a tiny bit too large. In previous versions (up to v0.4.2) Cropper would just max out the available area. Now it shrinks it down to some kind of default value:

Here's a fiddle to play with: click me.
Initially it will not max out the crop area. Change the width value from 1040 to 1038 to make it work.

I would like to scale the image, and then cut. I do not know whether the support.

I am loading dynamically the src for my image. Is there any way to reset cropper to use the default position and size (centered) after changing the src? I have tried passing in an empty object or null to the setData function

$(this).cropper('setData', {});

but it does not seem to have any effect and it seems to use the latest set position. Any suggestion?

Hi.
Can I set a max width (or height) and a min width (or height) for the "crop zone" ?

Is it possible to use the plugin multiple times on one page?
I can't figure it out how I should do that...
The preview image is right, but the target is changed on every instance when I change it on one image.

I wanted to update cropper to v0.4.0 in my project and recognized that it will fail to display the image in the correct size. It's not only an issue in my project, your demo page also looks broken:

Have a look at your demo page, grab the crop area at the lower left dot and drag it (with speed) outside of the image. The drag mode will end at the image border and leave the crop area as it is. Additionally the user will by mistake select elements on the page (because the mouse is still held down).

I would expect that as long as I'm pressing the mouse, the drag mode would continue, so I can easily max out the crop area to the image's borders.

Sry that I have to ask again, but now nothing is working..
Maybe you can help me - what am I doing wrong here?

        $('.cropper').each(function() {
            var id = $(this).attr('id');
            var id_splitted = id.split('_');
            $(this).cropper({
                aspectRatio: 1 / 1,
                preview: ".genusskroneaward_image_crop_"+id_splitted[1],
                done: function(data) {
                    $('#crop_x_'+id_splitted[1]).val(data.x1);
                    $('#crop_y_'+id_splitted[1]).val(data.y1);
                    $('#crop_width_'+id_splitted[1]).val(data.height);
                    $('#crop_height_'+id_splitted[1]).val(data.width);
                }
            });
        });

Now I get no image where I could select something...

This plugin / widget would benefit from having events. Ex: dragStart, dragEnd, resizeStart, resizeEnd, etc.

Could you add the ability to use your cropper when the image source is represent as in base64 format?

e.g.

div
img class="cropper" scr="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQE...">
/div

Or it is impossible?

Hi, i need the crop area size is fixed in 500 x 500 and the cliente don't can change this, have a way the make this correctly? because i make changes in Cropper.template for it, but is aparently simple . Thanks for great work!!!

hello there,

I'm trying to use this cropper with some pre-defined values, and it seems they are never loaded. I tried this:

 $(".cropper").cropper({
            aspectRatio: 'auto',
            modal: true,
            data: { width: 100, height: 100 },
            done: function(data) {
                console.log(data);
            }
   });

the cropper is loaded, but the data parameter has not effect. Am I doing something wrong?

Add rotate button to allow more precize cropping and copy the photoshop minimum options.

When setting an aspect ratio and a minimum height, Cropper will not retain the aspect ratio. Check this fiddle and resize the crop area by dragging the lower right corner to make the image smaller. At some point the height will stay the same, but the width will change, which leads to a different aspect ratio.

cropper.js line number 445

$this.outerWidth() is returning an [object] instead of a number. So the ratio calculated becomes NaN . This causes No style get applied to the "cropper-preview img" tag.

When I used your plugin in seperate html file it works. But when I use it inside my project This issue happens.

So I modified the line 445 from

ratio = $this.outerWidth() / dragger.width,
to
ratio = ($this.width()+2) / dragger.width,

If you call setImgSrc on a image inside a modal that is currently not being displayed, it will change the image but sets the croppable area to 0px x 0px.

I have used model example.where i need first browse image then model will appear with crop image option.I did practice and worked well except crome and safari browser.issue getting default image dimension as approximate 180*210 px.

Any ideas how to disable release of the cropper and can you please tell me how can I make the cropper appear in the center of the image by default?

1. Have a look at this fiddle.
2. Drag the lower right dot to make the crop area smaller.
3. When minHeight is reached, try making it smaller by dragging on any of the other dots.

The crop area will retain its size and aspect ratio, but will move to the side, which seems weird.

In certain scenarios, the crop data object is returning coordinates larger than the image itself. See image example:

Thus, when passed to a server we receive an error like this:
{"code":142,"error":"["Crop height should be in the range [1, height - top].","Crop height should be in the range [1, height - top]."]"}