diff options
Diffstat (limited to 'library/cropperjs/README.md')
| -rw-r--r-- | library/cropperjs/README.md | 25 |
1 files changed, 14 insertions, 11 deletions
diff --git a/library/cropperjs/README.md b/library/cropperjs/README.md index 6f1227f95..943db0b57 100644 --- a/library/cropperjs/README.md +++ b/library/cropperjs/README.md @@ -92,9 +92,12 @@ new Cropper(element[, options]) ``` ```css -/* Limit image width to avoid overflow the container */ +/* Ensure the size of the image fit the container perfectly */ img { - max-width: 100%; /* This rule is very important, please do not ignore this! */ + display: block; + + /* This rule is very important, please don't ignore this */ + max-width: 100%; } ``` @@ -258,7 +261,7 @@ Requires to set both the `rotatable` and `scalable` options to `true` at the sam **Note:** Don't trust this all the time as some JPG images have incorrect (not standard) Orientation values. -> Requires [Typed Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) support ([IE 10+](http://caniuse.com/typedarrays)). +> Requires [Typed Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) support ([IE 10+](https://caniuse.com/typedarrays)). ### modal @@ -619,7 +622,7 @@ cropper.zoomTo(.5, { Rotate the image with a relative degree. -> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)). +> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](https://caniuse.com/transforms2d)). ```js cropper.rotate(90); @@ -648,7 +651,7 @@ Rotate the image to an absolute degree. Scale the image. -> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)). +> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](https://caniuse.com/transforms2d)). ```js cropper.scale(-1); // Flip both horizontal and vertical @@ -830,15 +833,15 @@ Change the crop box position and size with new data. - 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)). + - Basic image: requires [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) support ([IE 9+](https://caniuse.com/canvas)). + - Rotated image: requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](https://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+](https://caniuse.com/cors)). 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. -Avoid to get a blank output image, you might need to set the `maxWidth` and `maxHeight` properties to limited numbers, because of [the size limits of a canvas element](https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element). +Avoid to get a blank (or black) output image, you might need to set the `maxWidth` and `maxHeight` properties to limited numbers, because of [the size limits of a canvas element](https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element). Also, you should limit them maximum zoom ratio (in the `zoom` event) as the same reason. ```js cropper.getCroppedCanvas(); @@ -865,7 +868,7 @@ cropper.getCroppedCanvas().toBlob((blob) => { // Use `jQuery.ajax` method for example $.ajax('/path/to/upload', { - method: "POST", + method: 'POST', data: formData, processData: false, contentType: false, @@ -1049,7 +1052,7 @@ Maintained under the [Semantic Versioning guidelines](https://semver.org/). ## License -[MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com) +[MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com/) ## Related projects |