⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper

Overview

Cropper

Build Status Downloads Version Dependencies

A simple jQuery image cropping plugin. As of v4.0.0, the core code of Cropper is replaced with Cropper.js.

  • Demo
  • Cropper.js - JavaScript image cropper (recommended)
  • jquery-cropper - A jQuery plugin wrapper for Cropper.js (recommended for jQuery users to use this instead of Cropper)

Main

dist/
├── cropper.css
├── cropper.min.css   (compressed)
├── cropper.js        (UMD)
├── cropper.min.js    (UMD, compressed)
├── cropper.common.js (CommonJS, default)
└── cropper.esm.js    (ES Module)

Getting started

Installation

npm install cropper jquery

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

Usage

Initialize with $.fn.cropper method.

<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  <img id="image" src="picture.jpg">
</div>
/* Limit image width to avoid overflow the container */
img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}
var $image = $('#image');

$image.cropper({
  aspectRatio: 16 / 9,
  crop: function(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  }
});

// Get the Cropper.js instance after initialized
var cropper = $image.data('cropper');

Options

See the available options of Cropper.js.

$('img').cropper(options);

Methods

See the available methods of Cropper.js.

$('img').once('ready', function () {
  $(this).cropper('method', argument1, , argument2, ..., argumentN);
});

Events

See the available events of Cropper.js.

$('img').on('event', handler);

No conflict

If you have to use other plugin with the same namespace, just call the $.fn.cropper.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="cropper.js"></script>
<script>
  $.fn.cropper.noConflict();
  // Code that uses other plugin's "$('img').cropper" can follow here.
</script>

Browser support

It is the same as the browser support of Cropper.js. As a jQuery plugin, you also need to see the jQuery Browser Support.

Contributing

Please read through our contributing guidelines.

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Chen Fengyuan

Comments
  • Handling EXIF Image Orientation

    Handling EXIF Image Orientation

    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.

    img_0112

    img_0113

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

    Thanks

    opened by bameyrick 58
  • Black background when cropping image

    Black background when cropping image

    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

    opened by bossmanpl 26
  • Any way to fit the cropper container to the image size ?

    Any way to fit the cropper container to the image size ?

    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 :

    capture d ecran 2016-08-06 a 12 47 26

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

    opened by Wharenn 25
  • Various issues in IE8

    Various issues in IE8

    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.

    opened by DanTup 25
  • How to pass the cropped image with form?

    How to pass the cropped image with form?

    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');
    });
    
    opened by nobutsta 23
  • Caman with cropper

    Caman with cropper

    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/

    opened by goneale 21
  • Large images have their file size dramatically increased

    Large images have their file size dramatically increased

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

    opened by ngaugler 21
  • poor resize quality

    poor resize quality

    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!

    opened by bigstoef 18
  • No feasible way to work with large images and require minimum image dimensions

    No feasible way to work with large images and require minimum image dimensions

    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?

    opened by brynnb 18
  • cropper is not a function

    cropper is not a function

    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
           });
    
        };
    
    opened by hwaynefair 17
  • Blank image on mobile with canvas.toDataUrl()

    Blank image on mobile with canvas.toDataUrl()

    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.

    opened by geekyme 17
Releases(v4.1.0)
  • v4.1.0(Oct 12, 2019)

  • v4.0.0(Apr 1, 2018)

  • v4.0.0-beta(Mar 3, 2018)

  • v4.0.0-alpha(Mar 1, 2018)

    • The core code of Cropper is replaced with Cropper.js.
    • Migration from Cropper 3.x:
      • Before:
        $().cropper({
          crop(event) {
            console.log(
              event.x,
              event.y,
              event.width,
              event.height,
              event.rotate,
              event.scaleX,
              event.scaleY,
            );
          },
        });
        
      • After:
        $().cropper({
          crop(event) {
            console.log(
              event.detail.x,
              event.detail.y,
              event.detail.width,
              event.detail.height,
              event.detail.rotate,
              event.detail.scaleX,
              event.detail.scaleY,
            );
          },
        });
        
    Source code(tar.gz)
    Source code(zip)
  • v3.1.6(Mar 1, 2018)

  • v3.1.5(Feb 25, 2018)

  • v3.1.4(Jan 13, 2018)

  • v3.1.3(Oct 21, 2017)

  • v3.1.2(Oct 18, 2017)

  • v3.1.1(Oct 11, 2017)

  • v3.1.0(Oct 8, 2017)

    • Added 4 new options to getCroppedCanvas method: minWidth, minHeight, maxWidth and maxHeight.
    • Enhanced image scaling: the scaleX and scaleY values should only be 1 or -1 before, but now they can be any numbers.
    • Improved crop box resizing behaviour in the northeast, northwest, southeast and southwest directions.
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Sep 3, 2017)

  • v3.0.0-rc.3(Jul 7, 2017)

  • v3.0.0-rc.2(May 30, 2017)

    • Improved performance for large images(#856).
    • Fixed the issue of ArrayBuffer reference error in IE9 (#885).
    • Fixed an issue of canvas box initialization.
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0-rc.1(Apr 30, 2017)

    • Use window.jQuery instead of window.$ for browser side usage (#876).
    • Change the main field value from dist/cropper.js (UMD) to dist/cropper.common.js (CommonJS).
    • Added module and browser fields to package.json.
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0-rc(Mar 25, 2017)

    • Clear cached pointers correctly to avoid touch zoom problem.
    • Improve the responsive option (only available when the container width/height great than the minContainerWidth/Height)
    • Improve the toggleDragModeOnDblclick option (only available when the dragMode option is set to crop or move)
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0-beta(Feb 25, 2017)

  • v3.0.0-alpha.1(Jan 21, 2017)

    • Use CSS3 2D Transforms instead of left and top for better performance.
    • Set withCredentials attribute when read the image data by XMLHttpRequest.
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0-alpha(Jan 15, 2017)

    • Removed build event.

    • Renamed built event to ready.

    • Removed event namespace.

      // Before
      $('img').on('zoom.cropper', handler)
      
      // After
      $('img').on('zoom', handler)
      
    • Ported code to ECMAScript 6.

    • Dropped IE8 support.

    • Improved event handler for Pointer Events (#824).

    • Improved setCropBoxData method.

    • Fixed a bug of auto crop when replace the image.

    Source code(tar.gz)
    Source code(zip)
  • v2.3.4(Sep 3, 2016)

    • Fixed a bug of cropping in view mode 1 and 2.
    • Fixed a bug of calling ready event twice when call replace method.
    • Fixed dependencies problem in the package.json file.
    Source code(tar.gz)
    Source code(zip)
  • v2.3.3(Aug 10, 2016)

  • v2.3.2(Jun 8, 2016)

    • Fixed wrong property reference (#705)
    • Fixed the wrong place of the crop event triggering (#706).
    • Fixed the calling order of scale and rotate (#709).
    Source code(tar.gz)
    Source code(zip)
  • v2.3.1(May 28, 2016)

    • Improved the rotate and scale transform behaviour (#633, idea by afeibus).
    • Improved the getCroppedCanvas method to return the whole canvas if it is not cropped (#666, PR by @vinnymac).
    • Check cross origin setting when load image by XMLHTTPRequest (#669)
    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Feb 22, 2016)

    • Added a new parameter to the replace method for applying filters.
    • Improved the image initializing for Safari (#120, #509).
    • Fixed incorrect size limitation of the crop box.
    • Fixed incorrect cropped canvas when scaleX or scaleY great than 1 (#598).
    Source code(tar.gz)
    Source code(zip)
  • v2.2.5(Jan 18, 2016)

  • v2.2.4(Jan 1, 2016)

  • v2.2.3(Dec 28, 2015)

  • v2.2.2(Dec 24, 2015)

  • v2.2.1(Dec 14, 2015)

    • Handle Data URL (Fixed #540: avoid to use XMLHttpRequest to open a Data URL)
    • Handle ajax error when load ArrayBuffer
    • Not to transform the image to base64 when Orientation equals to 1
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Dec 6, 2015)

Owner
Fengyuan Chen
Fengyuan Chen
DEPRECATED jQuery Responsive Carousel.

YEAH SO THIS IS PRETTY MUCH DEAD, DO YOURSELF A FAVOR AND SWITCH TO tiny-slider Owl Carousel 2 Touch enabled jQuery plugin that lets you create a beau

null 7.7k Sep 19, 2022
jQuery plugin that blows your visitors' retinas

Dense.js Homepage | Issues | Dense is a jQuery plugin for serving retina-ready, high pixel ratio images with ease. Small, ease-to-adapt, yet very cust

Jukka Svahn 212 Jun 30, 2022
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all

Orion Gunning 454 Sep 8, 2022
jQuery plugin that makes an image erasable (with mouse or touch movements)

jQuery.eraser v0.5.2 a jQuery plugin that makes an image erasable (with mouse or touch movements) This plugin replaces the targeted image by an intera

boblemarin 325 Sep 3, 2022
jQuery plugin based on raphael.js that allows you to display dynamic vector maps

jQuery Mapael - Dynamic vector maps The complete documentation is available on Mapael website (repository: 'neveldo/mapael-documentation'). Additional

Vincent Brouté 1k Sep 8, 2022
A jquery plugin for comparing two images

jQuery Images Compare A jquery plugin for comparing two images Badges Features compatibility : ie9+ Effort to put appearance via css (easier to skin /

Sylvain Combes 49 Sep 5, 2022
Nivo Slider - The Most Awesome jQuery Image Slider

Maintainer's Wanted! - Ineterested in contributing regularly to Nivo Slider development? Get in touch Nivo Slider The Nivo Slider is world renowned as

Verti Studio 1.2k Jul 25, 2022
Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

##Unite Gallery - Responsive jQuery Gallery Plugin Product Link: unitegallery.net This gallery has commercial versions for: WordPress , Joomla! , Pres

Max Valiano 530 Jul 31, 2022
jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

Jono Menz 3.2k Sep 19, 2022
Codecs lets you use read, write, edit, and analyze images.

Codecs Codecs lets you use read, write, edit, and analyze images. npm install @astropub/codecs Usage import * as fs from 'node:fs/promises' import * a

Astro Community 7 Jul 5, 2022
⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-viewer

Viewer A simple jQuery image viewing plugin. As of v1.0.0, the core code of Viewer is replaced with Viewer.js. Demo Viewer.js - JavaScript image viewe

Fengyuan Chen 1k Sep 13, 2022
Jquery-cropper - A jQuery plugin wrapper for Cropper.js.

jquery-cropper A jQuery plugin wrapper for Cropper.js. Demo Main dist/ ├── jquery-cropper.js (UMD) ├── jquery-cropper.min.js (UMD, compresse

Fengyuan Chen 621 Aug 30, 2022
⚠️ This project is not maintained anymore! Please go to https://github.com/visjs

vis.js (deprecated!) ❗ This project is not maintained anymore! (See Issue #4259 for details) We welcome you to use the libraries from the visjs commun

null 7.9k Sep 12, 2022
A JSON polyfill. No longer maintained.

?? Unmaintained ?? JSON 3 is **deprecated** and **no longer maintained**. Please don't use it in new projects, and migrate existing projects to use th

BestieJS Modules 1k Sep 8, 2022
No longer maintained, superseded by JS Cookie:

IMPORTANT! This project was moved to https://github.com/js-cookie/js-cookie, check the discussion. New issues should be opened at https://github.com/j

Klaus Hartl 8.6k Sep 19, 2022
CasperJS is no longer actively maintained. Navigation scripting and testing utility for PhantomJS and SlimerJS

CasperJS Important note: the master branch hosts the development version of CasperJS, which is now pretty stable and should be the right version to us

CasperJS 7.3k Sep 14, 2022
No longer actively maintained.

Vide No longer actively maintained. I am not interested to maintain jQuery plugins anymore. If you have some fixes, feel free to make PR. Easy as hell

Ilya Caulfield 3.3k Sep 21, 2022
No longer actively maintained.

Remodal No longer actively maintained. I am not interested to maintain jQuery plugins anymore. If you have some fixes, feel free to make PR. Responsiv

Ilya Caulfield 2.8k Sep 20, 2022
Source code for the deprecated expo-google-app-auth package. Deprecated in favor of expo-auth-session.

expo-google-app-auth Source code for the deprecated expo-google-app-auth package. Expo Google App Auth API wrapped the deprecated expo-app-auth packag

Expo 3 Apr 28, 2022