Cropper.js Avatar Trim

Introduction and use

<link  href= "/path/to/cropper.css" rel= "stylesheet" ><script src= "/path/to/cropper.js" ></script >

HTML Structure

<div class= "Demo" >  </div

Project Introduction

var New Cropper (image, {        16/9,        viewMode:1,        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);        }    });

Parameters Options

1. viewmode-Define the Cropper view mode

Type: number; default: 0; 0,1,2,3 can be used;

0: No limit, 3 can be moved to 2 outside.
1:3 can only be moved within 2.
2:2 pictures are not all covered with 1 (that is, you can have a gap on one side when shrinking)
3:2 picture fills the entire 1

2.ragmode--defines the drag mode of the cropper.

Type: String default: ' Crop ' option: ' crop ': can produce a new crop box 3 ' move ': can only move 3 ' none ': nothing to handle

3. aspectratio--the width-to-height ratio of the cropping box

Type: number; default: NAN; in the default. Can change the size of the cropping box at will;

4. data-If you have already stored the previous data, it will be automatically passed to the SetData method at build time.

Type: object; default:null;

5. preview--Add additional elements (containers) for preview

Type: element/ String default: ""; note here is a DOM element. Must be able to be obtained by Document.queryselectorall; preview:". Small", HTML structure:

6. responsive-re-renders the cropper when resizing the window

Type: Boolean default:true;

7. restore-restores the cropped area after resizing the window.

Type: Boolean default:true;

8. checkcrossorigin--Check whether the current image is a cross-domain image

Type: Boolean default:true;

9. checkorientation--Check the EXIF orientation information for the current image.

Type: Boolean default:true

modal-Displays the black mode above the picture and below the cropping box.

Type: Boolean default:true

One. guides-displays the dashed line above the crop box.

Type: Boolean default:true

The center-crop box is in the center of the picture.

Type: Boolean default:true;

highlight– Displays a white area above the crop box (highlighting the Crop box).

Type: Boolean default:true;

background– Displays the container's grid background.

Type: Boolean default:true;

autocrop– When initializing, the image can be generated automatically.

Type: Boolean default:true

autocroparea– defines the auto crop area size (in percent) and the picture to compare.

Type: Number default: 0.8; is the size of the crop box display

movable– allows you to move the back image

Type: Boolean default:true;

rotatable– Whether the image is allowed to be rotated.

Type: Boolean default:true;

scalable– Whether the image is allowed to be scaled.

Type: Boolean default:true;

zoomable– The image is allowed to enlarge.

Type: Boolean default:true;

zoomontouch– Whether you can zoom in on the image by dragging the touch.

Type: Boolean default:true;

zoomonwheel– Whether the image can be enlarged by moving the mouse.

Type: Boolean default:true;

wheelzoomratio–. When you move an image with the mouse, you define the zoom scale.

Type: Number default: 0.1;

cropboxmovable-Whether to move the clipping box by dragging.

Type: Boolean default:true; change to false: The clipping box cannot be dragged. 

cropboxresizable-Whether to resize the trim box by dragging.

Type: Boolean default:true; change to false: The clipping box cannot be resized. 

toggledragmodeondblclick-When you click two times, you can toggle the drag mode between "crop" and "move".

Type: Boolean default:true;

The minimum width of the mincontainerwidth-container.

Type: Number default: 200;

Cropper.js Avatar Trim