imagecropper文档
2015-12-21 17:51
501 查看
Basic usage:
1 . Include the jQuery image cropper plugin’s stylesheet in the head section of the page.
2 . Include jQuery library and the jQuery image cropper plugin’s javascript in the footer.
3 . Insert an image you want to crop in the page.
4 . Create container elements to display the image previews.
5 . Call the function on the image to initialize the image cropper.
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.
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.
// Rotate the image.
// Enable (unfreeze) the cropper.
// Disable (freeze) the cropper.
// Reset the cropping zone to the start state.
// Reset the cropping zone.
// Add a true param to reset the cropping zone to the default state.
// Clear the cropping zone.
// Replace the image.
// Get the cropped zone data.
// Reset the cropped zone with new data.
// Enable to reset the aspect ratio after initialized.
// “auto” or a positive number (“auto” for free ratio).
// 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.
// Change the drag mode.
// “crop”, “move” and “none”.
// 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.
// 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
// Destroy the Cropper and remove the instance form the target image.
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")
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因