diff options
Diffstat (limited to 'library/cropperjs/README.md')
| -rw-r--r-- | library/cropperjs/README.md | 214 |
1 files changed, 124 insertions, 90 deletions
diff --git a/library/cropperjs/README.md b/library/cropperjs/README.md index 73e8dda30..6f1227f95 100644 --- a/library/cropperjs/README.md +++ b/library/cropperjs/README.md @@ -1,11 +1,12 @@ # Cropper.js -[](https://travis-ci.org/fengyuanchen/cropperjs) [](https://www.npmjs.com/package/cropperjs) [](https://www.npmjs.com/package/cropperjs) +[](https://travis-ci.org/fengyuanchen/cropperjs) [](https://www.npmjs.com/package/cropperjs) [](https://www.npmjs.com/package/cropperjs) > JavaScript image cropper. - [Website](https://fengyuanchen.github.io/cropperjs) - [Photo Editor](https://fengyuanchen.github.io/photo-editor) - An advanced example of Cropper.js. +- [jquery-cropper](https://github.com/fengyuanchen/jquery-cropper) - A jQuery plugin wrapper for Cropper.js. ## Table of contents @@ -23,7 +24,7 @@ ## Features -- Supports 38 [options](#options) +- Supports 39 [options](#options) - Supports 27 [methods](#methods) - Supports 6 [events](#events) - Supports touch (mobile) @@ -32,7 +33,7 @@ - Supports scaling (flipping) - Supports multiple croppers - Supports to crop on a canvas -- Supports to crop image in the browser-side by canvas +- Supports to crop an image in the browser-side by canvas - Supports to translate Exif Orientation information - Cross-browser support @@ -56,7 +57,7 @@ dist/ npm install cropperjs ``` -Include files: +In browser: ```html <link href="/path/to/cropper.css" rel="stylesheet"> @@ -67,11 +68,21 @@ The [cdnjs](https://github.com/cdnjs/cdnjs) provides CDN support for Cropper.js' ### Usage -Initialize with `Cropper` constructor: +#### Syntax -- Browser: `window.Cropper` -- CommonJS: `var Cropper = require('cropperjs')` -- ES2015: `import Cropper from 'cropperjs'` +```js +new Cropper(element[, options]) +``` + +- **element** + - Type: `HTMLImageElement` or `HTMLCanvasElement` + - The target image or canvas element for cropping. + +- **options** (optional) + - Type: `Object` + - The options for cropping. Check out the available [options](#options). + +#### Example ```html <!-- Wrap the image or canvas element with a block element (container) --> @@ -88,18 +99,21 @@ img { ``` ```js -var image = document.getElementById('image'); -var cropper = new Cropper(image, { +// import 'cropperjs/dist/cropper.css'; +import Cropper from 'cropperjs'; + +const image = document.getElementById('image'); +const cropper = new Cropper(image, { aspectRatio: 16 / 9, - crop: function(e) { - console.log(e.detail.x); - console.log(e.detail.y); - console.log(e.detail.width); - console.log(e.detail.height); - console.log(e.detail.rotate); - console.log(e.detail.scaleX); - console.log(e.detail.scaleY); - } + crop(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); + }, }); ``` @@ -109,7 +123,7 @@ How to crop a new area after zoom in or zoom out? > Just double click your mouse to enter crop mode. -How to move the image after crop an area? +How to move the image after cropping an area? > Just double click your mouse to enter move mode. @@ -124,17 +138,17 @@ How to crop a square area in free ratio mode? #### Notes - The size of the cropper inherits from the size of the image's parent element (wrapper), so be sure to wrap the image with a **visible block element**. - > If you are using cropper in a modal, you should initialize the cropper after the modal shown completely. Otherwise, you will not get a correct cropper. + > If you are using cropper in a modal, you should initialize the cropper after the modal is shown completely. Otherwise, you will not get the correct cropper. -- The outputted cropped data bases on the original image size, so you can use them to crop the image directly. +- The outputted cropped data is based on the original image size, so you can use them to crop the image directly. - If you try to start cropper on a cross-origin image, please make sure that your browser supports HTML5 [CORS settings attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), and your image server supports the `Access-Control-Allow-Origin` option (see the [HTTP access control (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)). #### Known issues -- [Known iOS resource limits](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html): As iOS devices limit memory, the browser may crash when you are cropping a large image (iPhone camera resolution). To avoid this, you may resize the image first (preferably below 1024 pixels) before start a cropper. +- [Known iOS resource limits](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html): As iOS devices limit memory, the browser may crash when you are cropping a large image (iPhone camera resolution). To avoid this, you may resize the image first (preferably below 1024 pixels) before starting a cropper. -- Known image size increase: When export the cropped image on browser-side with the `HTMLCanvasElement.toDataURL` method, the size of the exported image may be greater than the original image's. This is because the type of the exported image is not the same as the original image's. So just pass the type the original image's as the first parameter to `toDataURL` to fix this. For example, if the original type is JPEG, then use `cropper.getCroppedCanvas().toDataURL('image/jpeg')` to export image. +- Known image size increase: When exporting the cropped image on browser-side with the `HTMLCanvasElement.toDataURL` method, the size of the exported image may be greater than the original image's. This is because the type of the exported image is not the same as the original image's. So just pass the type the original image's as the first parameter to `toDataURL` to fix this. For example, if the original type is JPEG, then use `cropper.getCroppedCanvas().toDataURL('image/jpeg')` to export image. [⬆ back to top](#table-of-contents) @@ -150,7 +164,7 @@ If you want to change the global default options, You may use `Cropper.setDefaul - Options: - `0`: no restrictions - `1`: restrict the crop box to not exceed the size of the canvas. - - `2`: restrict the minimum canvas size to fit within the container. If the proportions of the the canvas and the container differ, the minimum canvas will be surrounded by extra space in one of the dimensions. + - `2`: restrict the minimum canvas size to fit within the container. If the proportions of the canvas and the container differ, the minimum canvas will be surrounded by extra space in one of the dimensions. - `3`: restrict the minimum canvas size to fill fit the container. If the proportions of the canvas and the container are different, the container will not be able to fit the whole canvas in one of the dimensions. Define the view mode of the cropper. If you set `viewMode` to `0`, the crop box can extend outside the canvas, while a value of `1`, `2` or `3` will restrict the crop box to the size of the canvas. A `viewMode` of `2` or `3` will additionally restrict the canvas to the container. Note that if the proportions of the canvas and the container are the same, there is no difference between `2` and `3`. @@ -166,48 +180,57 @@ Define the view mode of the cropper. If you set `viewMode` to `0`, the crop box Define the dragging mode of the cropper. +### initialAspectRatio + +- Type: `Number` +- Default: `NaN` + +Define the initial aspect ratio of the crop box. By default, it is the same as the aspect ratio of the canvas (image wrapper). + +> Only available when the `aspectRatio` option is set to `NaN`. + ### aspectRatio - Type: `Number` - Default: `NaN` -Set the aspect ratio of the crop box. By default, the crop box is free ratio. +Define the fixed aspect ratio of the crop box. By default, the crop box is free ratio. ### data - Type: `Object` - Default: `null` -The previous cropped data if you had stored, will be passed to `setData` method automatically when built. +The previous cropped data if you had stored, will be passed to `setData` method automatically when initialized. Only available when the `autoCrop` option is set to `true`. ### preview -- Type: `Element` or `String` +- Type: `Element`, `Array` (elements), `NodeList` or `String` (selector) - Default: `''` -- An element or A valid selector for [Document.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) +- An element or an array of elements or a node list object or a valid selector for [Document.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) -Add extra elements (containers) for previewing. +Add extra elements (containers) for preview. **Notes:** -- The maximum width is the initial width of preview container. -- The maximum height is the initial height of preview container. +- The maximum width is the initial width of the preview container. +- The maximum height is the initial height of the preview container. - If you set an `aspectRatio` option, be sure to set the same aspect ratio to the preview container. -- If preview is not getting properly displayed, set `overflow: hidden` style to the preview container. +- If the preview is not getting properly displayed, set `overflow: hidden` style to the preview container. ### responsive - Type: `Boolean` - Default: `true` -Re-render the cropper when resize the window. +Re-render the cropper when resizing the window. ### restore - Type: `Boolean` - Default: `true` -Restore the cropped area after resize the window. +Restore the cropped area after resizing the window. ### checkCrossOrigin @@ -218,7 +241,7 @@ Check if the current image is a cross-origin image. If it is, when clone the image, a `crossOrigin` attribute will be added to the cloned image element and a timestamp will be added to the `src` attribute to reload the source image to avoid browser cache error. -By adding `crossOrigin` attribute to image will stop adding timestamp to image url and stop reload of image, but the request (XMLHttpRequest) to read the image data for orientation checking will require a timestamp now. +By adding `crossOrigin` attribute to image element will stop adding timestamp to image URL and stop reload of image, but the request (XMLHttpRequest) to read the image data for orientation checking will require a timestamp to bust cache to avoid browser cache error now, you can set the `checkOrientation` option to `false` to cancel this request. If the value of the image's `crossOrigin` attribute is `"use-credentials"`, then the `withCredentials` attribute will set to `true` when read the image data by XMLHttpRequest. @@ -227,7 +250,7 @@ If the value of the image's `crossOrigin` attribute is `"use-credentials"`, then - Type: `Boolean` - Default: `true` -Check the current image's Exif Orientation information. +Check the current image's Exif Orientation information. Note that only a JPEG image may contains Exif Orientation information. More exactly, read the Orientation value for rotating or flipping the image, and then override the Orientation value with `1` (the default value) to avoid some issues ([1](https://github.com/fengyuanchen/cropper/issues/120), [2](https://github.com/fengyuanchen/cropper/issues/509)) on iOS devices. @@ -277,7 +300,7 @@ Show the grid background of the container. - Type: `Boolean` - Default: `true` -Enable to crop the image automatically when initialize. +Enable to crop the image automatically when initialized. ### autoCropArea @@ -333,7 +356,7 @@ Enable to zoom the image by wheeling mouse. - Type: `Number` - Default: `0.1` -Define zoom ratio when zoom the image by wheeling mouse. +Define zoom ratio when zooming the image by wheeling mouse. ### cropBoxMovable @@ -354,7 +377,9 @@ Enable to resize the crop box by dragging. - Type: `Boolean` - Default: `true` -Enable to toggle drag mode between "crop" and "move" when click twice on the cropper. +Enable to toggle drag mode between "crop" and "move" when clicking twice on the cropper. + +> Requires [`dblclick`](https://developer.mozilla.org/en-US/docs/Web/Events/dblclick) event support. ### minContainerWidth @@ -407,60 +432,60 @@ The minimum height of the crop box. - Type: `Function` - Default: `null` -A shortcut of the "ready" event. +A shortcut of the `ready` event. ### cropstart - Type: `Function` - Default: `null` -A shortcut of the "cropstart" event. +A shortcut of the `cropstart` event. ### cropmove - Type: `Function` - Default: `null` -A shortcut of the "cropmove" event. +A shortcut of the `cropmove` event. ### cropend - Type: `Function` - Default: `null` -A shortcut of the "cropend" event. +A shortcut of the `cropend` event. ### crop - Type: `Function` - Default: `null` -A shortcut of the "crop" event. +A shortcut of the `crop` event. ### zoom - Type: `Function` - Default: `null` -A shortcut of the "zoom" event. +A shortcut of the `zoom` event. [⬆ back to top](#table-of-contents) ## Methods -As there is an **asynchronous** process when load the image, you **should call most of the methods after ready**, except "setAspectRatio", "replace" and "destroy". +As there is an **asynchronous** process when loading the image, you **should call most of the methods after ready**, except "setAspectRatio", "replace" and "destroy". > If a method doesn't need to return any value, it will return the cropper instance (`this`) for chain composition. ```js new Cropper(image, { - ready: function () { + ready() { // this.cropper[method](argument1, , argument2, ..., argumentN); this.cropper.move(1, -1); // Allows chain composition this.cropper.move(1, -1).rotate(45).scale(1, -1); - } + }, }); ``` @@ -471,13 +496,13 @@ Show the crop box manually. ```js new Cropper(image, { autoCrop: false, - ready: function () { + ready() { // Do something here // ... // And then this.cropper.crop(); - } + }, }); ``` @@ -489,16 +514,16 @@ Reset the image and crop box to their initial states. Clear the crop box. -### replace(url[, onlyColorChanged]) +### replace(url[, hasSameSize]) - **url**: - Type: `String` - A new image url. -- **onlyColorChanged** (optional): +- **hasSameSize** (optional): - Type: `Boolean` - - If only change the color, not the size, then the cropper only need to change the srcs of all related images, not need to rebuild the cropper. This can be used for applying filters. - - If not present, its default value is `false`. + - Default: `false` + - If the new image has the same size as the old one, then it will not rebuild the cropper and only update the URLs of all related images. This can be used for applying filters. Replace the image's src and rebuild the cropper. @@ -613,7 +638,7 @@ Rotate the image to an absolute degree. - **scaleX**: - Type: `Number` - Default: `1` - - The scaling factor to apply on the abscissa of the image. + - The scaling factor to apply to the abscissa of the image. - When equal to `1` it does nothing. - **scaleY** (optional): @@ -636,7 +661,7 @@ cropper.scale(1, -1); // Flip vertical - **scaleX**: - Type: `Number` - Default: `1` - - The scaling factor to apply on the abscissa of the image. + - The scaling factor to apply to the abscissa of the image. - When equal to `1` it does nothing. Scale the abscissa of the image. @@ -672,9 +697,10 @@ Scale the ordinate of the image. Output the final cropped area position and size data (base on the natural size of the original image). > You can send the data to server-side to crop the image directly: +> > 1. Rotate the image with the `rotate` property. -> 1. Scale the image with the `scaleX` and `scaleY` properties. -> 1. Crop the image with the `x`, `y`, `width` and `height` properties. +> 2. Scale the image with the `scaleX` and `scaleY` properties. +> 3. Crop the image with the `x`, `y`, `width` and `height` properties.  @@ -687,7 +713,7 @@ Output the final cropped area position and size data (base on the natural size o Change the cropped area position and size with new data (base on the original image). -> **Note:** This method only available when the `viewMode` option great than or equal to `1`. +> **Note:** This method only available when the value of the `viewMode` option is greater than or equal to `1`. ### getContainerData() @@ -717,7 +743,7 @@ Output the container size data. - `scaleX`: the scaling factor to apply on the abscissa of the image if scaled - `scaleY`: the scaling factor to apply on the ordinate of the image if scaled -Output the image position, size and other related data. +Output the image position, size, and other related data. ### getCanvasData() @@ -734,11 +760,12 @@ Output the image position, size and other related data. Output the canvas (image wrapper) position and size data. ```js -var imageData = cropper.getImageData(); -var canvasData = cropper.getCanvasData(); +const imageData = cropper.getImageData(); +const canvasData = cropper.getCanvasData(); if (imageData.rotate % 180 === 0) { - console.log(canvasData.naturalWidth === imageData.naturalWidth); // true + console.log(canvasData.naturalWidth === imageData.naturalWidth); + // > true } ``` @@ -798,15 +825,16 @@ Change the crop box position and size with new data. - A canvas drawn the cropped image. - Notes: - - The aspect ratio of the output canvas will be fitted to aspect ratio of the crop box automatically. + - The aspect ratio of the output canvas will be fitted to the aspect ratio of the crop box automatically. - If you intend to get a JPEG image from the output canvas, you should set the `fillColor` option first, if not, the transparent part in the JPEG image will become black by default. + - Uses the Browser's native [canvas.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) API to do the compression work, which means it is **lossy compression**. For better image quality, you can upload the original image and the cropped data to a server and do the crop work on the server. - Browser support: - Basic image: requires [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) support ([IE 9+](http://caniuse.com/canvas)). - Rotated image: requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)). - Cross-origin image: requires HTML5 [CORS settings attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) support ([IE 11+](http://caniuse.com/cors)). -Get a canvas drawn the cropped image. If it is not cropped, then returns a canvas drawn the whole image. +Get a canvas drawn the cropped image (lossy compression). If it is not cropped, then returns a canvas drawn the whole image. > After then, you can display the canvas as an image directly, or use [HTMLCanvasElement.toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) to get a Data URL, or use [HTMLCanvasElement.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) to get a blob and upload it to server with [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) if the browser supports these APIs. @@ -827,26 +855,28 @@ cropper.getCroppedCanvas({ imageSmoothingQuality: 'high', }); -// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob` -cropper.getCroppedCanvas().toBlob(function (blob) { - var formData = new FormData(); +// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`. +// The default value for the second parameter of `toBlob` is 'image/png', change it if necessary. +cropper.getCroppedCanvas().toBlob((blob) => { + const formData = new FormData(); - formData.append('croppedImage', blob); + // Pass the image file name as the third parameter if necessary. + formData.append('croppedImage', blob/*, 'example.png' */); - // Use `jQuery.ajax` method + // Use `jQuery.ajax` method for example $.ajax('/path/to/upload', { method: "POST", data: formData, processData: false, contentType: false, - success: function () { + success() { console.log('Upload success'); }, - error: function () { + error() { console.log('Upload error'); - } + }, }); -}); +}/*, 'image/png' */); ``` ### setAspectRatio(aspectRatio) @@ -874,14 +904,14 @@ Change the drag mode. ### ready -This event fires when the target image has been loaded and the cropper instance is ready for cropping. +This event fires when the target image has been loaded and the cropper instance is ready for operating. ```js -var cropper; +let cropper; image.addEventListener('ready', function () { console.log(this.cropper === cropper); - // -> true + // > true }); cropper = new Cropper(image); @@ -912,9 +942,9 @@ cropper = new Cropper(image); This event fires when the canvas (image wrapper) or the crop box starts to change. ```js -image.addEventListener('cropstart', function (e) { - console.log(e.detail.originalEvent); - console.log(e.detail.action); +image.addEventListener('cropstart', (event) => { + console.log(event.detail.originalEvent); + console.log(event.detail.action); }); ``` @@ -952,6 +982,11 @@ This event fires when the canvas (image wrapper) or the crop box stops to change This event fires when the canvas (image wrapper) or the crop box changed. +**Notes:** + +- When the `autoCrop` option is set to `true`, a `crop` event will be triggered before the `ready` event. +- When the `data` option is set, another `crop` event will be triggered before the `ready` event. + ### zoom - **event.detail.originalEvent**: @@ -969,11 +1004,10 @@ This event fires when the canvas (image wrapper) or the crop box changed. This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper). ```js -image.addEventListener('zoom', function (e) { - +image.addEventListener('zoom', (event) => { // Zoom in - if (e.detail.ratio > e.detail.oldRatio) { - e.preventDefault(); // Prevent zoom in + if (event.detail.ratio > event.detail.oldRatio) { + event.preventDefault(); // Prevent zoom in } // Zoom out @@ -985,7 +1019,7 @@ image.addEventListener('zoom', function (e) { ## No conflict -If you have to use other cropper with the same namespace, just call the `Cropper.noConflict` static method to revert to it. +If you have to use another cropper with the same namespace, just call the `Cropper.noConflict` static method to revert to it. ```html <script src="other-cropper.js"></script> @@ -1007,21 +1041,21 @@ If you have to use other cropper with the same namespace, just call the `Cropper ## Contributing -Please read through our [contributing guidelines](CONTRIBUTING.md). +Please read through our [contributing guidelines](.github/CONTRIBUTING.md). ## Versioning -Maintained under the [Semantic Versioning guidelines](http://semver.org/). +Maintained under the [Semantic Versioning guidelines](https://semver.org/). ## License -[MIT](http://opensource.org/licenses/MIT) © [Chen Fengyuan](http://chenfengyuan.com) +[MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com) ## Related projects - [angular-cropperjs](https://github.com/matheusdavidson/angular-cropperjs) by @matheusdavidson - [ember-cropperjs](https://github.com/danielthall/ember-cropperjs) by @danielthall -- [iron-cropper](https://www.webcomponents.org/element/safetychanger/iron-cropper) (web component) by @safetychanger +- [iron-cropper](https://github.com/safetychanger/iron-cropper) by @safetychanger - [react-cropper](https://github.com/roadmanfong/react-cropper) by @roadmanfong - [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs) by @Agontuk |