Firstly, thanks for the great plugin! However I've noticed a small issue; When loading an image in with EXIF orientation, everything works as expected until the "getDataURL" method is called. The generated image does not crop correctly and the rotation of the cropped image is incorrect.

Below I've provided screen shots of the chosen crop area and the image generated by "Get Data URL (JPG)". The image was taken on an iPad in portrait mode.

The white area in the generated image only seems to happen when a crop is taken near the bottom the image.

Thanks

I have viewMode: 0, and when i want to crop image, setting cropping box outside of that image, script adds to my saved picture black background, is there a way i could add white background when this happens ?

I am using version 2.3.0

Hi,

I'm trying to use this plugin to crop images on my website. However, I don't see how to force an exact fit of the cropper container to the format of my images. There is always a space at the left and right of the image that can be cropped on :

The cropper-wrap-box seems always slightly larger than the cropper-canvas one. This lead to allow crop outside of the image which is what I don't want.

Am I missing an option or something ?

(I didn't forget to add the max-width: 100% directive)

Thank you :)

The readme says IE8 is supported, but we're having issues making this work. Even the demo page is broken in IE8. The textboxes all say NaN, and the dragging has strange behaviour.

Hello, I want to pass the cropped image along the normal form. I can make everything right - original image, cropped preview but cannot pass it with form. I wish I could use some thing like <input type="file" name="file" id="cropped_img" />. Is it possible? Here's my code:

<form class="avatar-form" action="inc/settings_customers_uploader_tn.php" enctype="multipart/form-data" method="post">
  <input type="hidden" name="id" value="xx" />
    <div class="modal-header">

      <h4 class="modal-title" id="ajaxModalLabel">Cropper</h4>
    </div>
    <div class="modal-body">
      <div class="avatar-body">

        <!-- Crop and preview -->
        <div class="row">
          <div class="col-md-9">
            <div class="avatar-wrapper">
                <img src="../../photos/hello.jpg" />
            </div>
          </div>
          <div class="col-md-3 align-center">
            <div class="avatar-preview" style="border:solid 1px #ccc;border-radius:5px;height:150px;width:120px;"></div><br />
            <button class="btn btn-primary btn-block avatar-save" type="submit"><em class="fa fa-floppy-o"></em>&nbsp;Save</button>
          </div>
        </div>

        </div>
      </div>
    </div>
    <!-- <div class="modal-footer">
      <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
    </div> -->
  </form>

Javascrip:

var $image = $('.avatar-wrapper > img'),
    cropBoxData,
    canvasData;

$('#ajaxModal').on('shown.bs.modal', function () {
  $image.cropper({
    aspectRatio: 1/1,
    autoCropArea: 0.80,
    preview: ".avatar-preview",
    built: function () {
      // Strict mode: set crop box data first
      $image.cropper('setCropBoxData', cropBoxData);
      $image.cropper('setCanvasData', canvasData);
    }
  });
}).on('hidden.bs.modal', function () {
  cropBoxData = $image.cropper('getCropBoxData');
  canvasData = $image.cropper('getCanvasData');
  $image.cropper('destroy');
});

Hi there,

Great plugin fengyuanchen! I was wondering if anybody in the community has managed to get cropper working with the caman.js filters library? It relies on a tag, and I tried adding an id attribute to my tag (which gets converted to canvas) and attempted a simple command once the cropper was loaded, but no such luck. The caman guides are here - http://camanjs.com/guides/

Cropper seems to have issues with larger images. I am attaching an example image. This file is <8 MB on disk but when cropper receives the file, even if I make no changes, the filesize within Javascript is >29MB. When I try to post this data to a webserver, it takes forever to upload since it's such a big file size, and it also causes issues on the server side with resource limits.

In the demo (http://fengyuanchen.github.io/cropper/) when I upload this file via 'Blob URL' and expand the crop box to the entire image, I cannot even download the image via the 'Get Cropped Canvas' feature.

When large images are cropped to small images the image quality drastically decreases, when I resize the images before uploading them and crop after that the quality is great. I have found that its advised to resize the image in steps because the quality decreases exponentionally by resize size.

I am not that confident in my own skills to fix this, im using a striped down version of the main example and expect its in de scale scalex and scaly functions in crop.js thank you in advance!

If a user uploads an image 5000 pixels wide, and I want the minimum width of a cropped image to be 2000 pixels, the only built-in way I know of to do this with default options is to use minContainerWidth set to 2000 pixels, which requires that the cropper tool be 2000+ pixels wide in order for it to fit.

Another way to enforce a minimum image size was brought up in #339 - this involves getting the width from getCropBoxData and reverting the crop if it fell below the minimum pixel width. However, this ignores the zoom ratio.

So my solution to do this was to get the width from getCropBoxData and divide it by the zoom ratio to get the calculated real cropped image size.

(edited for clarification and better Fiddle) Here is the JSFiddle I put together that almost works for my purposes. Without this extra logic, the webpage would need to be at least 3000 pixels wide plus margins and whatever else if you wanted to ensure a real, non-upscaled image dimensions after cropping.

The use case for this extends beyond simply having huge images - it would allow something like cropping an image that is 1920px wide with a required cropped width of 700 pixels while using a browser that is taking up half a monitor without worrying about horizontal scrolling.

Editing large images while enforcing large minimum dimensions at a minimum resolution seems like a fairly reasonable thing to want to do with this library. I was disappointed when @fengyuanchen said in #339 that he didn't feel this was needed. It took me (admittedly no JS pro) many hours to figure this out and create that JSFiddle.

Is there some other way to do this that I haven't thought of? If not, It would be really nice if there could be a minImageWidth option that handled all of this for future developers. @fengyuanchen, are you open to the idea of accepting a pull request adding this, having seen a reasonable use case for it demonstrating the need?

Love your extensive documentation - but especially all the functionality built into this cropper!

BUT - for the life of me I cannot get it to work inside an ASP MVC application!

I've worked iwth java script for years - and typically can take such projects like this and incorporate into my web applications - but not so here...

I've tried everything from the "quick start" suggested - to importing everything from the demo project - being sure to check css and script links etc..... but I STILL can't get it to work - and always (whatever my approach) get the dreaded "cropper is not a function".

Is there any way you you possibly help me? I'd love to use this cropper if at all possible.

Thanks so much!!!

Wayne Fair

//////////////////////////// UPDATE: I DID get it to work sort of... But what I have discovered is that if I put any of the method calls inside another function - I still get the "cropper is not a function"

Like: function btnClicked() { $().cropper('getCroppedCanvas');

       $().cropper('getCroppedCanvas', {
           width: 160,
           height: 90
       });

    };

I am using getCroppedCanvas in the following manner:

var canvas = this.cropper.cropper('getCroppedCanvas', {
        width: 160,
        height: 160
      });


var image = canvas.toDataURL("image/jpeg");

$image.attr('src', image)

However, all i'm seeing is a empty 160x160 data url image. Am I doing something wrongly?

The problem only exists on mobile with pictures taken from my iPhone 6 camera (high megapixels). Desktop works perfectly fine.