aboutsummaryrefslogtreecommitdiffstats
path: root/library/cropperjs/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'library/cropperjs/README.md')
-rw-r--r--library/cropperjs/README.md25
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