imagecropper文档

Basic usage:

1 . Include the jQuery image cropper plugin’s stylesheet in the head section of the page.

<link rel="stylesheet" href="src/cropper.css">

2 . Include jQuery library and the jQuery image cropper plugin’s javascript in the footer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

3 . Insert an image you want to crop in the page.

<img class="cropper" src="picture.jpg">

4 . Create container elements to display the image previews.

<div class="extra-preview extra-preview-sm"></div>
<div class="extra-preview extra-preview-xs"></div>

5 . Call the function on the image to initialize the image cropper.

<script>
$(function() {
    $(".cropper").cropper({
        preview: ".extra-preview" // A jQuery selector string, add extra elements to show preview.
    });
})
</script>

6 . Options.

// Define the view mode of the cropper

viewMode: 0, // 0, 1, 2, 3

// Define the dragging mode of the cropper

dragMode: ‘crop’, // ‘crop’, ‘move’ or ‘none’

// Define the aspect ratio of the crop box

aspectRatio: NaN,

// An object with the previous cropping result data

data: null,

// A jQuery selector for adding extra containers to preview

preview: ”,

// Re-render the cropper when resize the window

responsive: true,

// Restore the cropped area after resize the window

restore: true,

// Check if the target image is cross origin

checkCrossOrigin: true,

// Show the black modal

modal: true,

// Show the dashed lines for guiding

guides: true,

// Show the center indicator for guiding

center: true,

// Show the white modal to highlight the crop box

highlight: true,

// Show the grid background

background: true,

// Enable to crop the image automatically when initialize

autoCrop: true,

// Define the percentage of automatic cropping area when initializes

autoCropArea: 0.8,

// Enable to move the image

movable: true,

// Enable to rotate the image

rotatable: true,

// Enable to scale the image

scalable: true,

// Enable to zoom the image

zoomable: true,

// Enable to zoom the image by dragging touch

zoomOnTouch: true,

// Enable to zoom the image by wheeling mouse

zoomOnWheel: true,

// Define zoom ratio when zoom the image by wheeling mouse

wheelZoomRatio: 0.1,

// Enable to move the crop box

cropBoxMovable: true,

// Enable to resize the crop box

cropBoxResizable: true,

// Toggle drag mode between “crop” and “move” when click twice on the cropper

toggleDragModeOnDblclick: true,

// Size limitation

minCanvasWidth: 0,

minCanvasHeight: 0,

minCropBoxWidth: 0,

minCropBoxHeight: 0,

minContainerWidth: 200,

minContainerHeight: 100,

// Shortcuts of events

build: null,

built: null,

cropstart: null,

cropmove: null,

cropend: null,

crop: null,

zoom: null

7 . Events.

/* ('#target').on(EVENT, function (e) {

     ...

   });

*/

/*

fires when a cropper instance starts to load a image.

Related original events: "mousedown", "touchstart".


$('img').on('dragstart.cropper', function (e) {

  console.log(e.type); // dragstart

  console.log(e.namespace); // cropper

  console.log(e.dragType); // ...

});

event.dragType:

“crop”: create a new crop box

“move”: move the canvas

“zoom”: zoom in / out the canvas by dragging touch.

“e”: resize the east side of the crop box

“w”: resize the west side of the crop box

“s”: resize the south side of the crop box

“n”: resize the north side of the crop box

“se”: resize the southeast side of the crop box

“sw”: resize the southwest side of the crop box

“ne”: resize the northeast side of the crop box

“nw”: resize the northwest side of the crop box

“all”: move the crop box

*/

build.cropper

/*

fires when the crop box is changing.

event.dragType: The same as “dragstart.cropper”.

*/

dragmove.cropper

/*

fires when the crop box stops to change.

Related original events: “mousedown”, “touchstart”.

event.dragType: The same as “dragstart.cropper”.

Related original events: “mouseup”, “mouseleave”, “touchend”, “touchleave”, “touchcancel”.

*/

dragend.cropper

// fires when a cropper instance starts to zoom in its canvas.

zoomin.cropper

// fires when a cropper instance starts to zoom out its canvas.

zoomout.cropper
8 . Methods.

view source

// Zoom the image.

$("#target").cropper("zoom", 0.1)

// Rotate the image.

$("#target").cropper("rotate", 90)

// Enable (unfreeze) the cropper.

$("#target").cropper("enable")

// Disable (freeze) the cropper.

$("#target").cropper("disable")

// Reset the cropping zone to the start state.

$("#target").cropper("disable")

// Reset the cropping zone.

// Add a true param to reset the cropping zone to the default state.

$("#target").cropper("reset")

// Clear the cropping zone.

$("#target").cropper("clear")

// Replace the image.

$("#target").cropper("replace", "example.jpg")

// Get the cropped zone data.

$("#target").cropper("getData")

// Reset the cropped zone with new data.

$("#target").cropper("setData", {width: 480, height: 270})

// Enable to reset the aspect ratio after initialized.

// “auto” or a positive number (“auto” for free ratio).

$("#target").cropper("setAspectRatio", 1.618)

// Get an object containing image data, contains:

// “naturalWidth”, “naturalHeight”, “width”, “height”, “aspectRatio”, “ratio” and “rotate”.

// The “aspectRatio” is the value of “naturalWidth / naturalHeight”.

// The “ratio” is the value of “width / naturalWidth”.

// The “rotate” is the rotated degree of the current image.

$("#target").cropper("getImageData")

// Change the drag mode.

// “crop”, “move” and “none”.

$("#target").cropper("setDragMode", "crop").

// Get the data url (base64 image) of the cropped zone.

// getDataURL([options[, type[, quality]]])

// options: A Object contains: “width”, “height”. Define the sizes of the result image.

// type: A String indicating the image format. The default type is image/png. Other types: “image/jpeg”, “image/webp”.

// quality: A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp.

$("#target").cropper("getDataURL"),

// Set the cropped area data (base on the original image).

// Properties:

// x: the offset left of the cropped area

// y: the offset top of the cropped area

// width: the width of the cropped area

// height: the height of the cropped area

// rotate: the rotated degrees of the image

$("#target").cropper("setData", DATA),

// Destroy the Cropper and remove the instance form the target image.

$("#target").cropper("destroy")