备，⽀持canvas，并且⽀持跨浏览器使⽤。
cropper提供了⼤量的参数、⽅法和事件供图⽚的剪裁操作。安装
可以通过Bower或NPM来安装该插件。
使⽤⽅法
使⽤该图⽚剪裁插件⾸先要引⼊必要的js和css⽂件。
HTML结构
可以将图⽚或canvas直接包裹到⼀个块级元素中。
调⽤插件
可以使⽤$.fn.cropper⽅法来初始化该图⽚剪裁插件。
注意事项：
注意：剪裁区域的尺⼨继承⾃图⽚的⽗容器（包裹容器），所以要确保包裹图⽚的是⼀个可见的块级元素。输出的剪裁数据基于原始的图⽚尺⼨，你可以使⽤这些数据直接剪裁图⽚。如果你要使⽤跨源图⽚来作为剪裁图⽚，请确保你的浏览器⽀持HTML5 CORS settings attributes，并且你的图⽚服务器⽀持Access-Control-Allow-Origin属性。
bower install cropper npm install cropper
<script src ="/path/to/jquery.js"></script ><!-- jQuery is required --><link href ="/path/to/cropper.css" rel ="stylesheet"><script src ="/path/to/cropper.js"></script >
<!-- Wrap the image or canvas with a block element --><div class ="container"> <img src ="picture.jpg"></div >
$('.container > img').cropper({ aspectRatio: 16 / 9, crop: function (data) {
// Output the result data for cropping image. }});
配置参数
你可以通过$().cropper(options)⽅法来设置参数。如果你想改变全局默认参数，可以使⽤$.fn.cropper.setDefaults(options)⽅法。 aspectRatio：类型：Number，默认值NaN。设置剪裁容器的⽐例。
crop：类型：Function，默认值null。当改变剪裁容器或图⽚时的事件函数。
preview：类型：String(jQuery选择器)，默认值”。添加额外的元素（容器）的预览。
注意：
1.最⼤宽度是剪裁容器的初始化宽度
最⼤⾼度是剪裁容器的初始化⾼度
如果你设置了aspectRatio参数，确保预览容器具有相同的⽐例
{{{
名称类型及默认
值
说明
strict：
类型：
Boolean，默
认值true。
在strict模式中，canvas不能⼩于容器，剪裁容器不能再canvas之外。
responsive：
类型：
Boolean，默
认值true。
是否在窗⼝尺⼨改变的时候重置cropper。
checkImageOrigin：
类型：
Boolean，默
认值true。
security形容词性默认情况下，插件会检测图⽚的源，如果是跨域图⽚，图⽚元素会被添加crossOrigin class，并会为图⽚的url 添加⼀个时间戳来使getCroppedCanvas变为可⽤。添加时间戳会使图⽚重新加载，以使跨域图⽚能够使⽤
getCroppedCanvas。在图⽚上添加crossOrigin class会阻⽌在图⽚url上添加时间戳，及图⽚的重新加载。
background：
类型：
Boolean，默
认值true。
是否在容器上显⽰⽹格背景。
modal：
类型：
Boolean，默
认值true。
是否在剪裁框上显⽰⿊⾊的模态窗⼝。
guides：
类型：
Boolean，默
认值true。
是否在剪裁框上显⽰虚线。
highlight：
类型：
Boolean，默
认值true。
是否在剪裁框上显⽰⽩⾊的模态窗⼝。
autoCrop：
类型：
Boolean，默
认值true。
是否在初始化时允许⾃动剪裁图⽚。
autoCropArea：
类型：
Number，默
认值0.8（图
⽚的80%）。
0-1之间的数值，定义⾃动剪裁区域的⼤⼩。
dragCrop：
类型：
Boolean，默
认值true。
是否允许移除当前的剪裁框，并通过拖动来新建⼀个剪裁框区域。
movable：
类型：
Boolean，默
认值true。
是否允许移动剪裁框。
resizable：
类型：
Boolean，默
认值true。
是否允许改变剪裁框的⼤⼩。
zoomable：
类型：
Boolean，默
认值true。
是否允许放⼤缩⼩图⽚。
mouseWheelZoom：
类型：
Boolean，默
认值true。
是否允许通过⿏标滚轮来缩放图⽚。
touchDragZoom：
类型：
Boolean，默
认值true。
是否允许通过触摸移动来缩放图⽚。
rotatable：
类型：
Boolean，默
认值true。
是否允许旋转图⽚。
minContainerWidth：
类型：
Number，默
认值200。
容器的最⼩宽度。
minContainerHeight：
类型：
Number，默
认值100。
jquery下载文件插件容器的最⼩⾼度。
minCanvasWidth：
类型：
Number，默
认值0。
canvas 的最⼩宽度（image wrapper）。
minCanvasHeight：
类型：
Number，默
认值0。
canvas 的最⼩⾼度（image wrapper）。
build：
类型：
Function，
默认值null。
built：
类型：
Function，
默认值null。
dragstart：
类型：
Function，
默认值null。
dragmove：
类型：
Function，
默认值null。
dragend：
类型：
Function，
默认值null。
zoomin：
文字转代码的软件叫什么类型：
Function，
默认值null。
zoomout：
类型：
Function，
默认值null。
linode日本成熟iphone69图片名称类型及默认
值
说明
}}}
⽅法
因为图⽚是异步加载的，所以你需要在built之后才能调⽤下⾯的⽅法，setAspectRatio、replace和destroy⽅法例外。
$().cropper({
built: function () {
$().cropper('method', argument1, , argument2, ..., argumentN)
}
}
move(offsetX, offsetY)：
1.offsetX：类型：Number，⽔平⽅向上移动的⼤⼩，单位像素。
2. offsetY：类型：Number，垂直⽅向上移动的⼤⼩，单位像素。 移动⼀幅图⽚：
$().cropper('move', 1, 0)
$().cropper('move', 0, -1)
zoom(ratio)：
ratio：
类型：Number
Zoom in：需要⼀个正数（ratio > 0）springboot和php哪个简单
Zoom out：需要⼀个负数（ratio < 0）
缩放⼀幅图⽚：
$().cropper('zoom', 0.1)
$().cropper('zoom', -0.1)
rotate(degree)：
ratio：
类型：Number
Rotate right：需要⼀个正数（degree > 0）
Rotate left：需要⼀个负数（degree < 0）
overflow动漫无减删达达兔旋转⼀幅图⽚，需要CSS3 Transforms3d的⽀持（IE10+）：
$().cropper('rotate', 90)
$().cropper('rotate', -90)
enable()：使cropper可⽤。
disable()：冻结cropper。
reset()：重置剪裁区域的图⽚到初始状态。
clear()：清空剪裁区域。
replace(url)：
url：
类型：String
⼀个新的图⽚URL
替换图⽚的URL重建cropper。
getData()：
返回值：
类型：Object
属性：
<1>x：剪裁区域左侧的偏移。
<2>y：剪裁区域距上部的偏移。
<3>width：剪裁区域的宽度。
<4>height：剪裁区域的⾼度。
<5>rotate：图⽚的旋转⾓度。
下图演⽰从原始图⽚中返回的剪裁区域数据。
getContainerData()：
返回值：
类型：Object
属性：
width：容器的当前宽度。
height：容器的当前⾼度。
输出容器尺⼨数据。
getImageData()：
返回值：
类型：Object
属性：
left：图⽚的左侧偏移。
top：图⽚的上部偏移。 width：图⽚的宽度。 height：图⽚的⾼度。
输出图⽚的位置和尺⼨⼤⼩。
getCanvasData()：
返回值：
类型：Object
属性：
left：canvas的左侧偏移。
top：canvas的上部偏移。 width：canvas的宽度。 height：canvas的⾼度。 输出canvas（图⽚容器）的位置和尺⼨⼤⼩。 etCanvasData(data)：
返回值：
类型：Object
属性：
left：canvas的距离左侧新的偏移。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论