fengyuanchen / cropperjs Goto Github PK

When you swipe up or down on a magicmouse the zoom in/out is far too fast to allow any form of precision.

(This used to be a similar problem on Google Maps, they eventually programmed around it - perhaps you can find the answer in their code)

First of all thanks for this amazing plugin and keeping it up-to-date!

1. In some previous versions you had a demo for cropping and uploading a avatar, but in the newest release I can't find this example?
2. So now I use the example of uploading a avatar of a previous Cropper.js release, and in this example you used the function "initIframe()" when "formData" is not supported. I assume this is only for Safari because all the other browsers such as Chrome does support "formData"?
3. Could you create or include in the next release a new example of avatar rotating, cropping and uploading?

Hi !

I am using cropper js and I'm experiencing a little issue.
When I leave aspectRatio set to free, I can't select (via the mouse) the cropper area (click & drag).

here are my options :

new Cropper(cropimage, {
        preview: '.preview',
        viewMode: 1,
        guides: false,
        center: false,
        highlight: false
    });

I am experiencing a Safari specici issue. Everything works fine in Chrome.

But when I upload an image I get two errors in Safari on line 118:77 of cropper.min.js

The data is in data:image/png format so I am not sure if it is some sort of CORS related issue. Any ideas?

To reproduce:

1. Create a cropper, initialize it with an image
2. Load another image with a different img tag.
3. Once loaded, call replace() (it doesn't matter if the 2nd argument is true or false)
4. Call getCroppedCanvas() and note the image isn't the one from replace(), it's the original image.

I'm doing manipulation on an image, then calling replace(). I'm taking the original image, altering it, then setting a different image element with the resulting DataURL. I take that new image element and call replace() on cropper. Instead of seeing the replaced image as output from the the getCroppedCanvas, it only shows the original image cropped. I've tried replacing the original image's src with the updated image but cropper still returns the wrong image

Just to note: I do see the updated image in the cropper.

Hello. see http://mattketmo.github.io/darkroomjs/
It demonstrate what i mean.
I tried implement it by call replace with passed cropped image, but it works sometimes incorrectly

now availbale to select part of photo and then save it by getCroppedCanvas().toDataUrl,
but we cant get dataUrl of current image

Not sure why this function was removed? It was something I'm using in order to prevent "dead space" from being saved against a print product crop. Is there a replacement, or was it error-prone?

I have to revert to 0.2.1 for the time being.

P.s. I love your work with this plugin, it has really been great!

Uncaught TypeError: cropper.getCroppedCanvas(...).toBlob is not a function

My code is simple, just like the example, it's function is uploading the picture:
function uploadCrop()
{

    cropper.getCroppedCanvas().toBlob(function (blob) {
    var formData = new FormData();

    formData.append('mypic', blob);

    var xhr = new XMLHttpRequest();  

I have a problem when I start the crop (only with default aspectRatio), cropbox becomes a line and I can't spread out it.

hello! thank you for this project;
i want use responsive cropper, but it working incorrectly with wide photos;
after removing this lines all good.
What do you think about it? Thank you!

Hi,

I'm using this lib to rotate pictures, and it seems that vendor prefixes for the CSS transform property are needed on Safari (iOs 8) to be able to preview the rotation correctly. This is also written on the Can I Use page linked in the README (http://caniuse.com/#feat=transforms2d).

Would it be possible to add the -webkit- and the -ms- to support Safari iOs 8 and IE 9 ?

I can make a PR if needed.

Thanks :)

got some issues with below function
$('#profile_image').cropper('getCroppedCanvas').toBlob(function (blob) {
console.log(blob);
});
console print something like below.
Blob {size: 71238, type: "image/png"}
size
71238
type
"image/png"
That's all. not returing the image and cannot upload the cropped image

Hello,
i use this awesome plugin for my private project. I generate automatically crop coordinates and give it to your plugin. I found out that Safari(Mac) and Chrome works not equal.

Or maybe i used the code wrong :/

Here is my code to set crop data to the plugin:
1.) I destroy the old image
3.) I set the new images based on a Base64 string
2.) I give the plugin some information
4.) I will set the coordinates

$g_image2crop.cropper("destroy");
$g_image2crop.attr("src", b64ImgData);
$g_image2crop.cropper(g_options);
$g_image2crop.cropper("setData", {
    x: parseInt(IMAGE_DATA[stringId].image.crop.x),
    y: parseInt(IMAGE_DATA[stringId].image.crop.y),
    height: parseInt(IMAGE_DATA[stringId].image.crop.h),
    width: parseInt(IMAGE_DATA[stringId].image.crop.w),
    rotate: 0,
    scaleX: 1,
    scaleY: 1
});

Can you help me to fix this?
Or is this a known issue?
Sry for my bad english ;)

Thanks a lot!

Best
Andre

Hello. Rotated image dont adapts to container size.

When setting these two options, they seem to apply to the box size itself, not taking into account the image. Is this intended? Is it possible to restrict the cropping to a certain px, relative to the image?

Hi, first, I apologize for asking this here, but I don't know where to put it.
I wanted to give a try to the demo and I can't figure out how I can modify the degree variable, I tried to put function in the console of Chrome such as : $('#image').rotate(5) but it says that it doesn't "recognize the function rotate", tried several ways since the beginning of the week but I really don't know what to do...

Regards

Hi,

First, setup a cropper with cropbox fixed and image movable:

{
            viewMode: 0,
            dragMode: 'move',
            cropBoxMovable: false,
            cropBoxResizable: false,
}

Then, crop the top-right corner and save the data

And finally, rebuild cropper and restore the data, we got

The cropbox move to top-right corner! (which is expected to stay center!) In the worst situation, the cropbox may be entirely outside the container.

The destroy() function of cropperjs tries to call element.off(..) which is not defined in a non JQuery environment. I guess this is a bug?

Heya! Great plugin! It works great for my application, but just one thing that I ran into. I would love to crop an animated gif. I've kept the gif format in my .toDataURL call but it still just saves it as a one frame gif. Let me know if this library supports it, and if not, if and when it could. Thank you!

I think it would be nice to support docs for definitions.
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/cropperjs

Hi!, I very like this plugin, it is more powerful than other crop plugins.
I found a bug, when the windows size is changed, it will throw error [Uncaught ReferenceError: $ is not defined], please see the code
Cheers!

Hi,

The crop box doesn't seem to resize if entering dimensions manually. Might be ignoring the dimensions because of the aspect ratio.

In case of manually entering dimensions, shouldn't the manual data override the aspect ratio?

Please code from export image resize.

Hey friend. Your tool is amazing. But i've found this issue - happens on both cropper and JQUERY

How to reproduce:

• Select aspect ratio cropper / VM: 1 / setDraggable: "move"
• Move image past the top of the container as to take a crop from the bottom
• Using the bottom-right toggle on the cropbox pull the box out as far as you can.
• Cropbox exceeds container

Hi,

A great plugin for cropping, thanks for that. But the issue I am facing is that I am unable to get the cropped image on Nexus 6 device (android 5.0 - google chrome browser). Modal appears with a white background without the cropped image. A quick help is needed.

Thank you,
Nijagun.

😢

如题。方法是如何使用呢？没找到 使用的API ~

fixed:

  if (options.checkCrossOrigin && isCrossOriginURL(url)) {
    crossOrigin = element.crossOrigin;

    if (!crossOrigin) {
      crossOrigin = 'anonymous';
      bustCacheUrl = addTimestamp(url);
    }

    this.crossOrigin = crossOrigin;
  }else{
    this.crossOrigin = undefined; // reset crossOrigin value
  }

When i try to upload my image it dosn't set the file type from the canvas:

cropper.getCroppedCanvas().toBlob(function (blob) {
    var file = new File([blob], "some_random_file_name.jpg");
    console.log("file: ", file);

    Upload
        .upload({
            url: '/wp-json/add_posts/v1/add_post_image',
            file: file,
            headers: {
                'Content-Type': 'image/jpg'
            }
        })
        .progress(function (evt) {
            // Set progress
            console.log("parseInt(100.0 * evt.loaded / evt.total): ", parseInt(100.0 * evt.loaded / evt.total));
        })
        .success(function (data, status, headers, config) {
            console.log("data: ", data);
            console.log("headers: ", headers);
            console.log("config: ", config);
        });
});

This outputs:

file: {
    lastModified: 1446807554707
    lastModifiedDate: Fri Nov 06 2015 11:59:14 GMT+0100 (CET)
    name: "some_random_file_name.jpg"
    size: 4165066
    type: ""
    webkitRelativePath: ""
}

Hello, and thank you for your great tool.
I would like to know if it's possible to scale the cropper container to fit the image's exact size. So, that means no "transparent" area on the right and left of the image.
I tried to use background: false but it didn't work as I thought it would. The "transparent" area just became gray.
Thanks!

Hello,

Neat plugin for the crops. Works as intended!
Trying to get an image to upload, resize / crop to 300x300px

And then I want that cropped image to be downloadable as well.
Any thoughts on how to accomplish that?

Thanks

Disable cropper on demo and then try to resize window - cropper will be not resizable

when use cropper.replace(img), throw an error "Cannot read property 'insertBefore' of null".

Hi,

I have a container that can be resized (height only), after resizing the container I want to resize the height of the crop box to fit the container's height. The crop box is not movable and resizable. Only the canvas can be moved and scaled.
So I call the setCropBoxData() method with the new Height but It doesn't work... I also call the setCanvasData() method to update the canvas height too.

This is the options I use:

{
  viewMode: 1,
  dragMode: 'move',
  cropBoxMovable: false,
  cropBoxResizable: false,
  toggleDragModeOnDblclick: false,
  autoCropArea: 1
}

Before resizing:

After resizing:

As you can see the canvas has been resized but the crop box not...

I'm noticed that the cropper's cropBoxData object has a maxHeight (equals to the initial image height) and a maxTop properties that is not updated on setCropBoxData() call. So the crop box height is never bigger than the image's initial height (in this case : 446px). When the container is smaller than 446px it works.

How can I resize the crop box so it always fit the container when it is resized ?

Thanks !

Hi i am using Cropper.js plugin in my site it is really fabulous ,it has everything what i need.but i am having some problem while using remote url in the image src. if i am referencing an image from the local drive means ,the cropper crops the image and send the data to the server without issues.but i am having problem while using remote urls as the example below.and the image is the container is present only if i add the option checkCrossOrigin:false when i am using remote url. couldn't figure out what is going wrong please help me out.

<!DOCTYPE html>
<html>
<head>
    <title> Cropperjs issue </title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/cropper.css" >
    <style>
         #cropper-container{
            width:500px;
            max-height:516px;
            position:relative;
         }
         #cropper-container img{
            max-width:100%;
         }
         #cropper-controls{
            position:absolute;
            left:50%;
            bottom:0px;
            z-index:2015;
            width:256px;
            height:32px;
            margin-left:-128px;
            background-color:rgba(0,0,0,0.5);
            color:#fff;
         }
         #cropper-controls .cropper-control-button{
            margin:0px;
            padding:0px;
            float: left;
            display: block;
            width: 32px;
            height: 32px;
            border-width: 0;
            font-size: 14px;
            text-align: center;
            background-color: transparent;
            color: #fff;
            cursor: pointer;
            box-shadow:none;
        }
        #cropper-controls .cropper-control-button:hover{
            background-color: #2ba6cb;
        }
    </style>
</head>
<body>

   <div id="cropper-container">
      <img id="cropper-img" src="http://az697095.vo.msecnd.net/vnext/products/137/3264/32a_149_137_3264_683.jpg" />
      <div id="cropper-controls">
            <button class="cropper-control-button cropper-dragMode" > <span class="icon-move" ></span> </button> 
            <button class="cropper-control-button cropper-cropMode" > <span class="icon-crop"></span> </button> 
            <button class="cropper-control-button cropper-zoomIn" > <span class="icon-zoom-in" ></span> </button> 
            <button class="cropper-control-button cropper-ZoomOut" > <span class="icon-zoom-out" ></span> </button> 
            <button class="cropper-control-button cropper-rotateLeft" > <span class="icon-rotate-left"></span> </button> 
            <button class="cropper-control-button cropper-rotateRight" > <span class="icon-rotate-right"></span> </button> 
            <button class="cropper-control-button cropper-refresh" > <span class="icon-refresh" ></span> </button> 
            <button class="cropper-control-button cropper-crop" > <span class="icon-ok"></span> </button> 
      </div>
   </div>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script src="js/cropper.js" ></script>
   <script>
        //initialize the cropper
        $('#cropper-img').cropper({
            checkCrossOrigin:false
        });

        $('.cropper-dragMode').on('click',function(){
            $("#cropper-img").cropper('setDragMode','move');
        });

        $('.cropper-cropMode').on('click',function(){
            $("#cropper-img").cropper('setDragMode','crop');
        });

        $('.cropper-zoomIn').on('click',function(){
            $('#cropper-img').cropper('zoom', 0.1);
        });

        $('.cropper-ZoomOut').on('click',function(){
            $('#cropper-img').cropper('zoom', -0.1);
        });

        $('.cropper-rotateRight').on('click',function(){
             $('#cropper-img').cropper('rotate', 45);
        });

        $('.cropper-rotateLeft').on('click',function(){
             $('#cropper-img').cropper('rotate', -45);
        });

        $('.cropper-refresh').on("click",function(){
            $('#cropper-img').cropper('reset');
        });

        $('.cropper-crop').on("click",function(){
            $('#cropper-img').cropper('getCroppedCanvas').toBlob(function (blob) {
              var formData = new FormData();

              formData.append('croppedImage', blob);

              $.ajax('upload.php', {
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function () {
                  console.log('Upload success');
                },
                error: function () {
                  console.log('Upload error');
                }
              });
            }); 
        });

   </script>
</body>
</html>

Hello, I'm an intern from cdnjs. I am a little confused about the difference between cropperjs and cropper. Would you please explain it to me to let me know whether it's necessary to add this library in cdnjs? Because the cropper is already in cdnjs. Thank you. :)
cc cdnjs/#7674

Great tool, but i ran into this issue,

Im trying to set minCropBoxWidth on viewmode 1 but it returns a smaller cropbox, actually i would love to be able to se a cropbox size and scale the image to that size

vm.cropper = new Cropper(image, {
    viewMode: 1,
    dragMode: 'move',
    aspectRatio: 1,
    autoCropArea: 1,
    minCropBoxWidth: 578,
    minCropBoxHeight: 578,
    center: true,
    highlight: false
});

Version: Cropper v2.3.0
OS: Mac OS 10.11.13
Browser: Chrome 49.0.2623.110 (64-bit)

When I zoom in and out on images using the scroll wheel/trackpad, the image scales, but the change isn't reflected in the scaleX and scaleY properties returned by the cropper's getData.

Here's how I'm implementing the library:

Cropper initialization

$imageBox.children('img').eq(i).wrap('div'); 
$imageBox.children('.crop-image-holder').eq(i).find('img').cropper({
                        checkCrossOrigin: false,
                        data:{ //set up focal point of crop
                            x: (x * $imageBox.children('.crop-image-holder').eq(i).width()) - (cw/2),
                            y: (y * $imageBox.children('.crop-image-holder').eq(i).height()) - (ch/2),
                            width: cw, //predetermined crop width
                            height: ch},//predetermined crop height
                        crop: function(e){
                        },
                        built: function(){
                            croppers.splice(i, 0, $(this)); //add to croppers array
                        }
                    });

I have an array of croppers called croppers. When I want to get the data from one of them, I call the following function:

/*
 * returns all the active crops on the screen
 */
var activeCrops = function () {
    var crops = [];
    for ( var i = 0; i < croppers.length; i++){
        crops.push(croppers[i].cropper('getData'));
        }
    return crops;
};

Result of activeCrops()[0]:

{
   "height": 294.53039077737657,
   "rotate":0,
   "scaleX":1,
   "scaleY":1,
   "width":442.1703067650182,
   "x":583.4753387898007,
   "y":162.59414612484034
}

ScaleX and ScaleY stay at 1, no matter how much I zoom the image.

Hi,

Can you make the _resize function public?
I'm using the private _resize for now but it would feel better if it was public instead :)

The reason I need this is because the crop box position and size changes dynamically when the user selects different "models".

Thanks in advance
Peter

see

The demo feels very laggy in Chrome while you play with the cropbox. In IE, it feels like frames are dropped.

http://fengyuanchen.github.io/cropperjs/

That didn't happen a few weeks ago. Am I the only one?

Hi,

Can you add canvasData as an option?
I'm setting canvasData after the built event now. But you can see the old canvas flash before it updates

Thanks in advance

When autoCrop is set to false,cropBox is hidden after replace is called, however i can still do the crop action and get the crop data

Hello,
I have built an implmentation of a fixed cropper on mobile, using Cordova/phonegap.
my problem is, when I zoom in the Img, the cropper-drag-box covers the bottom buttons and I can't press them. I have tried changing the z-indexes with no success. Is there some setting that I'm not aware of that sets that element as "always on top" or something similar?
screenshot (through chrome//inspect) : http://imgur.com/2v0xlJP

Im trying to obtain cropper.getCroppedCanvas() inside the built function of my cropper instance. This works if I load a file from local drive but there's a weird issue when trying with a remote image (perhaps because its cross origin?).

When I build my new Cropper() the image will 'reload' and turn gray for a second. Inside my built function I have to use setTimeout to give the image time to reload before I can get the canvas:

cropper = new Cropper(image, {
      responsive: true,
      restore: false,
      guides: false,
      background: false,
      rotatable: false,
      movable: false,
      scalable: false,
      zoomable: false,
      zoomOnTouch: false,
      zoomOnWheel: false,
      built: function(e){
        setTimeout(function(){
          cropper.getCroppedCanvas()
        },1000);
      }
    });

If I put a breakpoint inside built I can see the image is grayed out as it seems cropper is reloading it:

Using setTimeout seems like a hack that is prone to error. What should I do? I'd like to start processing the initial crop as soon as cropper initializes.

UPDATE:

• This has nothing to do with cross origin. An image on the same host experiences the same issue.

我用这个的时候，报错：
$(...).cropper(...).toBlob is not a function

$(...).cropper(...).toDataURL is not a function