javascript-cropper插件翻译笔记
https://github.com/fengyuanchen/cropper
cropper使用说明
jQuery v1.9.1以上版本支持
插件有38个options,27种methods,6种事件
支持手机端touch事件
支持多个croppers
支持在canvas上修剪
支持在浏览器端通过canvas修剪图片
Supports to translate Exif Orientation information
跨浏览器支持
二、文件目录
├── cropper.css
├── cropper.min.css
├── cropper.js
(80 KB, UMD)
├── cropper.min.js
(30 KB, UMD, compressed)
├── cropper.common.js (80 KB, CommonJS)
└── cropper.esm.js
(80 KB, ES Module)
三、开始cropper之旅
下载最新版本 https://github.com/fengyuanchen/cropper
也可以在http://www.bootcdn.cn/cropper/下载各个版本，也可以直接引用
1&引入文件：
&script src="/path/to/jquery.js"&&/script&
// 需要jquery
href="/path/to/cropper.css" rel="stylesheet"&
// 引入css
&script src="/path/to/cropper.js"&&/script&
2&初始化：
&img id="image" src="img.jpg"&
// 需要在处理的图片标签(canvas也可以)外层，包裹一个块元素(div)，不可省略！
max-width: 100%;
// 限制图片最大宽度，避免超出外层容器，必须！
$('#image').cropper(options);
// 初始化cropper
2.常见问题
双击用于模式切换，按住shift用于裁剪宽高比固定的区域
1&放大或缩小后，如何裁剪一个区域
双击鼠标进入 '裁剪模式'
2&裁剪一个区域后，如何移动图片
双击鼠标进入 '移动模式'
3&自由宽高比模式下，固定宽高比
调整裁剪框时，按住 'shift'
4&自由宽高比模式下，如何裁剪一个正方形区域
裁剪图片时，按住 'shift'
1）修剪器的大小继承包裹图像的div，确保此div可见。
2）如果在模态框中使用cropper，必须等模态框完全显示后再初始化裁剪器。输出的裁剪数据基于原始图像尺寸，因此可以使用它们直接裁剪图像。
3）如果在跨源的图像上使用cropper,需要浏览器支持HTML5 CORS设置属性，图片服务器支持Access-Control-Allow-Origin option,(参阅HTTP access control(CORS)).
4.已知的问题
1&已知的iOS资源限制，由于iOS设备限制内存，当裁剪大图像（iPhone相机的分辨率)时，浏览器可能会崩溃。为了避免这种情况，您可以在启动裁剪器之前首先调整图像的大小（低于1024像素）。
2&图像尺寸的增加问题：使用HTMLCanvasElement.toDataURL()在浏览器端导出裁剪的图像时，导出的图像可能大于原始图像大小，这是因为导出的图像类型与原始图像不同。只需将原始图像作为第一个参数传递给toDataURL可解决此问题。如果原始类型是jpeg,用$().cropper('getCroppedCanvas').toDataURL('image/jpeg')来导出图像。
5.Options - 配置项
用$().cropper(options)设置配置项，用$.fn.cropper.setDefaults(options)来改变全局默认配置项。
1) viewMode - 视图模式
type: Number
定义裁剪器的视图模式，默认值是0，
0：裁剪框可以在画布外展开，
1，2，3将裁剪框限制为画布大小，2或3将画布限制到容器。
2.限制最小画布尺寸以适应容器。如果画布与容器比例不同，则最小画布的其中一个维度被额外的空格包围。
2）dragMode - 拖动模式
type：String
定义裁剪器的拖动模式，default: 'crop',
'crop': 创建一个新的裁剪框
'move',移动canvas
'none',什么也不做
3）aspectRatio - 宽高比
type: Number
设置裁剪框的宽高比，默认情况下，为空闲比例（NaN）。
4）data - 初始化图片数据
type: Object,default: null，如果存储了以前的数据，将自动传递给setData方法。
5）preview - 预览
type: String(jQuery selector),default: '',为预览添加额外的元素（容器）。
注意：最大宽度（高度）是预览容器的初始宽度（高度）。
如果设置了aspectRatio选项，请确保以相同的宽高比设置预览容器。
如果预览没有正确显示，请给预览容器设overflow:hidden
6) responsive(实时响应)
调整窗口大小时，重新渲染裁剪器。
type：Boolean,default: true
7) restore
调整窗口大小后，恢复裁剪区域。
type：Boolean,default: true
8）checkCrossOrigin
检查当前图像是否是跨源图像
type：Boolean,default: true
如果是，当克隆图像时，将crossOrigin属性添加到克隆的图像元素中，并将时间戳添加到src属性以重新加载源图像以避免浏览器缓存错误。
通过将crossQrigin属性添加到图像将停止向图像url添加时间戳，并停止重新加载图像。
如果图像的crossOrigin属性值为"use-credentials",则在通过XMLHttpRequest读取图像数据时，withCredentials属性将会设置为true。
9）checkOrientation
检查当前图像的Exif Orientation information
type：Boolean,default: true
更准确的说，读取旋转或翻转图像的Orientation值，然后用1（default）覆盖Orientation值，以免在iOS设备上出现一些问题（#120， #509）
需要同时设置ratatable（旋转）和scalable(缩放)为true
注意：不要总是相信这个，因为一些jpg图像有不正确的方向值。
需要Typed Arrays support(IE10+)
在图像的上方和裁剪框的下方显示黑色模态。
type：Boolean,default: true
11) guides
显示裁剪框上的虚线
type：Boolean,default: true
12）center
在裁剪框上显示中心指示器。
type：Boolean,default: true
13）highlight
在裁剪框上显示白色模态（突出显示裁剪框）
type：Boolean,default: true
14）background
显示容器的网格背景
type：Boolean,default: true
15）autoCrop
在初始化时启用自动裁剪图像。
type: Boolean，默认值为：true
16）autoCropArea
介于0和1之间的数字，定义自动裁剪区域的大小（百分比）
type： Number,默认值： 0.8（80%）的图像
17）movable
启用移动图像
type：Boolean,default: true
18）ratotable(可旋转)
启用旋转图像
type: boolean,default: true
19) scalable(可缩放)
type: boolean,default: true
Enable to scale the image
20）zoomable
type: boolean,default: true
Enable to zoom the image
21) zoomOnTouch
type: boolean,default: true
启用通过拖动触摸缩放图像。
22）zoomOnWheel
type: boolean,default: true
启用通过鼠标滚轮缩放图像。
23）wheelZoomRatio
通过滚动滚轮缩放时的缩放倍率
type：Number Default: 0.1
24) cropBoxMovable
type: boolean，default: true
启用通过拖动来移动裁剪框。
25）cropBoxResizable
type: boolean，default: true
启用通过拖动来调整裁剪框的大小。
26）toggleDragModeOnDblclick
类型：布尔值
默认值：true
双击裁剪器，在 'crop-重新定义裁剪器' 和 'move-移动裁剪器' 模式下切换
27）minContainerWidth
类型：数字
默认值：200
容器的最小宽度。
28) minContainerHeight
类型：数字
默认值：100
容器的最小高度。
29) minCanvasWidth
类型：数字
画布的最小宽度（img wrapper-图片外层的div）。
30) minCanvasHeight
类型：数字
画布的最小高度（图像包装器）。
31) minCropBoxWidth
类型：数字
裁剪框的最小宽度。
注意：这个大小是相对于页面，而不是图像。
32) minCropBoxHeight
类型：数字
裁剪框的最小高度。
注意：这个大小是相对于页面，而不是图像。
cropper事件绑定的便捷方法，直接作为属性传递：
$('#image').cropper({
guides: false,
ready: function(e){
而不用再次调用
$('#image').cropper({
guides: false,
$('#image').on("ready", function(e){
类型：function
默认值：null
A shortcut of the "ready" event.
34) cropstart
类型：function
默认值：null
A shortcut of the "cropstart" event。
35) cropmove
Type: Function
Default: null
A shortcut of the "cropmove" event.
36) cropend
Type: Function
Default: null
A shortcut of the "cropend" event.
Type: Function
Default: null
A shortcut of the "crop" event.
Type: Function
Default: null
A shortcut of the "zoom" event.
6.Methods - 方法
由于加载图像是一个异步进程，所以应该在ready之后调用大部分方法，除了setAspectRatio,replace and destroy。
$('#image').cropper({
ready: function () {
// 调用方法
// 格式：cropper('方法名', '参数1', '参数2', ...)
$('#image').cropper('method', argument1, , argument2, ..., argumentN);
1) crop() - 选择好选区，调用即可手动裁剪！
$('#image').cropper({
autoCrop: false,
// 关闭自动裁剪
ready: function () {
// Do something here
这里才是调用 'crop()' 方法
$(this).cropper('crop');
// 裁剪(这里的$(this) === $('#image'))
2) reset()
将图像和裁剪框重置为初始状态。
3) clear()
清除裁剪框。
4）replace(url[, onlyColorChanged])
更换图像的src并重建裁剪器。
type: String
新图像的url。
onlyColorChanged(可选)
type: 布尔值，默认值为 false。
如果只改变颜色，而不是大小，那么裁剪器只需要更改所有相关图像的srcs，不需要重新构建裁剪器。 这可以用于应用过滤器。
5) enable()
启用（解冻）裁剪器。
6）disable()
禁用（冻结）裁剪器。
7）destroy()
销毁裁剪器，并从图像中删除实例。
8）move(offsetX[,offsetY])
canvas(图片外层div)，水平和垂直方向的偏移量，相对于当前位置，单位为px。
offsetX - 水平
offsetY - 垂直(如果未设置，默认值是：offsetX)
$('#image').cropper('move', 1);
$('#image').cropper('move', 1, 0);
$('#image').cropper('move', 0, -1);
9）moveTo(x[,y])
canvas(图片外层div)，水平和垂直方向的绝对定位，相对于初始位置，单位为px。
10）zoom(ratio)
canvas(图片外层div)，相对缩放。(缩放的是canvas)
type: Number,
放大，ratio & 0,
缩小，ratio & 0
$('#image').cropper('zoom', 0.1);
$('#image').cropper('zoom', -0.1);
11) zoomTo(ratio)
canvas(图片外层div)，绝对缩放。
// 1:1（canvasData.width === canvasData.naturalWidth） // 1:1，缩放后宽度 == 原始宽度
$('#image').cropper('zoomTo', 1);
12) rotate(degree)
相对当前位置，旋转图像。(旋转的是图像)
type：Number
向右旋转(顺时针)：需要正数（度数& 0）
向左旋转(逆时针)：需要负数（度&0）
Requires CSS3 2D Transforms support (IE 9+).
13) rotateTo(degree)
旋转图像到某个角度。(旋转的是图像)
14）scale(scaleX[,scaleY])
X轴和Y轴，拉伸图片。
默认值为：1，表示什么都不做。
未设置，默认值为：scaleX
-1，正好相反(也就是镜像)。范围应该是 -Infinite ~ +Infinite
Requires CSS3 2D Transforms support (IE 9+).
$('#image').cropper('scale', -1);
// X轴&Y轴同时镜像
$('#image').cropper('scale', -1, 1);
// X轴镜像
$('#image').cropper('scale', 1, -1);
// Y轴镜像
15) scaleX(scaleX)
X轴拉伸图片
16) scaleY(scaleY)
Y轴拉伸图片
17) getData([rounded])
输出最终裁剪区域的位置和大小数据（基于原图像的尺寸）。
返回一个对象：
x:裁剪区域左侧的偏移量
y:裁剪区域顶部的偏移量
width：裁剪区域的宽度
height：裁剪区域的高度
rotate：图像的旋转度。
scaleX：X轴的拉伸
scaleY：Y轴拉伸
rounded - 可选，boolean类型，默认为：false。设置为true，返回四舍五入后的数据
我们可以将获取到的裁剪数据，直接发送到服务器后端，来进行图像的裁剪：
使用rotate旋转图像。
使用scaleX和scaleY拉伸图像。
使用x,y,width,height裁剪图像。
18）setData(data)
传递一个同 'getData()' 返回的对象，来设置图像的裁剪区域。(基于原图)
传递的数据，是经过 'round' 四舍五入后的数据
此方法仅在 'viewMode' 选项大于或等于1时可用。
19）getContainerData()
输出最外层容器的大小数据。
返回一个对象：
width - 当前容器的宽
height - 当前容器的高
20）getImageData()
输出图像位置、大小以及其他相关数据
返回一个对象：
left - 图像的左偏移
top - 图像的上便宜
width - 图像的宽度
height - 图像的高度
naturalWidth - 图像的自然宽度
naturalHeight - 图像的自然高度
aspectRatio - 图像的宽高比
rotate - 图像的旋转角度
scaleX - 图像的X轴拉伸
scaleY - 图像的Y轴拉伸
21）getCanvasData()
输出canvas(图片外层div)位置、大小数据。
返回一个对象：
left - canvas的左偏移
top - canvas的上便宜
width - canvas的宽度
height - canvas的高度
naturalWidth - canvas的自然宽度
naturalHeight - canvas的自然高度
var imageData = $('#image').cropper('getImageData');
var canvasData = $('#image').cropper('getCanvasData');
// 180°旋转图像时，图像尺寸 == canvas尺寸
if (imageData.rotate % 180 === 0) {
console.log(canvasData.naturalWidth === imageData.naturalWidth);
22）setCanvasData(data)
传递新数据对象，设置canvas(图片外层div)位置和大小。
对象属性：
left - canvas的左偏移
top - canvas的上便宜
width - canvas的宽度
height - canvas的高度
23) getCropBoxData()
输出裁剪框的位置和大小数据
返回一个对象:
left - 裁剪框的左偏移
top - 裁剪框的上偏移
width - 裁剪框的宽度
height - 裁剪框的高度
24）setCropBoxData(data)
传递新数据对象，设置裁剪框的位置和大小数据
left - 裁剪框的左偏移
top - 裁剪框的上偏移
width - 裁剪框的宽度
height - 裁剪框的高度
25) getCroppedCanvas([options]);
返回图像裁剪后，绘制的canvas对象，如果图像未裁剪，则将返回整个图像，绘制的canvas。
返回结果类型是：HTMLCanvasElement 元素对象
有了canvas对象后，我们就可以调用canvas的API，来进行处理。可以直接将画布显示为图像，或者使用HTMLCanvasElement.toDataURL获取数据URL，或者如果浏览器支持这些API，则使用HTMLCanvasElement.toBlob获取一个Blob并将其上传到具有FormData的服务器。
参数 'options' 是一个对象：
width - 输出的canvas的宽度
height - 输出的canvas的高度
fillColor - 输出canvas中的透明区域，填充的颜色
imageSmoothingEnabled - 启用图像的平滑处理(默认是true)
imageSmoothingQuality - 设置图像平滑处理的质量，可选值有：low, medium, high
注意(重要！)：
1&输出画布的宽高比将自动适应裁剪框的纵横比。
2&如果打算从输出画布获取JPEG图像，则应首先设置fillColor选项，否则JPEG图像中间的透明部分默认为黑色。
浏览器支持：
Basic image: requires Canvas support (IE 9+).
Rotated image: requires CSS3 2D Transforms support (IE 9+).
Cross-origin image: requires HTML5 CORS settings attributes support (IE 11+).
Get a canvas drawn the cropped image. If it is not cropped, then returns a canvas drawn the whole image.
$('#image').cropper('getCroppedCanvas');
2&传递参数对象
$('#image').cropper('getCroppedCanvas', {
width: 160,
height: 90,
fillColor: '#fff',
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high',
3&如果浏览器支持“HTMLCanvasElement.toBlob”，则将裁剪的图像上传到服务器
$('#image').cropper('getCroppedCanvas').toBlob(function (blob) {
// 查看HTML5的 'formdata' 文档
// https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
var formData = new FormData();
formData.append('croppedImage', blob);
$.ajax('/path/to/upload', {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log('Upload success');
error: function () {
console.log('Upload error');
26) setAspectRatio(aspectRatio)
设置裁剪框的宽高比
aspectRatio：
类型：Number。必须是正数。
37）setDragMode([mode])
设置拖拽模式
[mode]可选，可以是：none, crop, move任意一个，默认是 'none'。
可以双击裁剪框来切换 'crop' 和 'move' 模式。
7.Events - 事件，对应上面绑定的事件，这里是说明事件返回的对象
当一个cropper实例完全构建时，触发该事件
2) cropstart
当canvas(图片外层div)或者裁剪框开始改变时触发此事件。
1&event.originalEvent:
type: Event
options: mousedown,mousestart和pointerdown
2&event.action
type: String
crop - 创建一个新的裁剪框，
move - 移动canvas(image wrapper)
zoom - 通过触摸放大和缩小canvas(image wrapper)
// 调整裁剪框各个方向的大小
all - 移动裁剪框（所有方向）
$('#image').on('cropstart', function (e) {
console.log(e.type);
// cropstart - 事件类型
console.log(e.namespace);
// cropper - 命名空间
console.log(e.action);
// {} - 行为
console.log(e.originalEvent.pageX);
// originalEvent - 待定
// 如果需要，阻止cropping, moving等。
if (e.action === 'crop') {
e.preventDefault();
3) cropmove
当canvas（image wrapper）或裁剪框改变时触发此事件。
1&event.originalEvent
type: Event
Options: mousemove,touchmove和pointermove
2&event.action
同 'cropstart'
4）cropend
当canvas（image wrapper）或裁剪框停止更改时会触发此事件。
1&event.originalEvent:
Type: Event
Options: mouseup, touchend, touchcancel, pointerup and pointercancel.
2&event.action
同 'cropstart'
当canvas（image wrapper）或裁剪框更改时，会触发此事件。
返回的事件的一些属性，同 'getData()' 方法返回的对象一致
event.width
event.height
event.rotate
event.scaleX
event.scaleY
当裁剪器实例开始放大或缩小canvas（image wrapper）时，触发此事件。
1&event.originalEvent:
Type: Event
Options: wheel, touchmove.
2&event.oldRatio:
缩放前，canvas的比例
Type: Number
3&event.ratio:
缩放后，canvas的比例(缩放后的宽 / 自然宽)
Type: Number
$('#image').on('zoom', function (e) {
// 缩放后比例 & 缩放前，表示放大(zoom in)
if (e.ratio & e.oldRatio) {
e.preventDefault();
// 缩放后比例 & 缩放前，表示缩小(zoom out)
if (e.ratio & e.oldRatio) {
// 不允许缩小
e.preventDefault();
8.解决cropper冲突
使用了同 'cropper' 相同命名空间的其他插件，调用 '$.fn.cropper.noConflict()' 来转换cropper
9.Browser支持
没有更多推荐了，&>&Cropper 总结文档
Cropper 总结文档
上传大小：13KB
Cropper可以为图片显示一个裁剪框，裁剪框允许用户调整大小和位置，常用来做用户自定义头像的裁剪功能
cropper.js cropper.css
最简单的办法是直接在HTML中引用这两个文件，不过每个项目的情况不同，可以根据情况来决定如何引入这两个文件。
综合评分：0
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有0条
VIP会员动态
热门资源标签
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
Cropper 总结文档
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*投诉人姓名：
*投诉人联系方式：
*版权证明：
*详细原因：
Cropper 总结文档cropper.js 实现裁剪图片并上传(PC端) - 简书
cropper.js 实现裁剪图片并上传(PC端)
由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器，所以上网查询了很多资料，也试用了许多案例，发现cropper插件裁剪是比较完善的，所以结合之前的使用情况，编写了此案例。本案例是参考实例，进行修改简化。
option相关参数说明：
viewMode 显示模式
Type: Number
Default: 0
0: the crop box is just within the container
裁剪框只能在 1内移动
1: the crop box should be within the canvas
裁剪框 只能在
2图片内移动
2: the canvas should not be within the container
2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
3: the container should be within the canvas
2图片 全部铺满1 （即 再怎么缩小也不会出现空隙）
Default: 'crop'
'crop': create a new crop box
当鼠标 点击一处时根据这个点重新生成一个 裁剪框
'move': move the canvas
可以拖动图片
'none': do nothing
图片就不能拖动了
toggleDragModeOnDblclick：
默认true .是否允许 拖动模式 “crop” 跟“move” 的切换状态。。即当点下为crop 模式，如果未松开拖动这时就是“move”模式。放开后又为“crop”模式。
preview： 截图的显示位置。类型：String
responsive：是否在窗口尺寸改变的时候重置cropper。类型：Boolean，默认值true。
checkImageOrigin：类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOriginclass，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOriginclass会阻止在图片url上添加时间戳，及图片的重新加载。
background：类型：Boolean，默认值true。是否在容器上显示网格背景。 要想改背景，是直接改，cropper.css样式中的 cropper-bg。
canvas（图片）相关
movable：类型：Boolean，默认值true。是否允许移动图片
rotatable：类型：Boolean，默认值true。是否允许旋转图片。
scalable： 默认 true 。 是否允许扩展图片。（暂时不知道干嘛用）
zoomable： 默认true, 石头允许缩放图片。
zoomOnWheel： 默认 true 是否允许鼠标滚轴 缩放图片
zoomOnTouch： 默认true 是否允许触摸缩放图片（触摸屏上两手指操作。）
wheelZoomRatio： 默认0.1 师表滚轴缩放图片比例。即滚一下。图片缩放多少。如 0.1 就是图片的10%
crop(裁剪框)相关
aspectRatio裁剪框比例
例如：: 1 / 1,//裁剪框比例 1：1
modal：类型：Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
cropBoxMovable:默认true ,是否允许拖动裁剪框
cropBoxResizable:默认 true,//是否允许拖动 改变裁剪框大小
autoCrop：类型：Boolean，默认值true。是否允许在初始化时自动出现裁剪框。
autoCropArea：类型：Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。
highlight：类型：Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
guides：类型：Boolean，默认值true。是否在剪裁框上显示虚线。
是否显示裁剪框 中间的+ restore :
类型：Boolean，默认值true
是否调整窗口大小后恢复裁剪区域。
minContainerWidth：类型：Number，默认值200。容器的最小宽度。
minContainerHeight：类型：Number，默认值100。容器的最小高度。
minCanvasWidth：类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
minCanvasHeight：类型：Number，默认值0。canvas 的最小高度（image wrapper）。
监听触发的方法
build：类型：Function，默认值null。build.cropper
事件的简写方式。 ====== 。控件初始化前执行
built：类型：Function，默认值null。built.cropper
事件的简写方式。
====== 空间初始化完成后执行
dragstart：类型：Function，默认值null。dragstart.cropper
事件的简写方式。 ======
拖动开始执行
dragmove：类型：Function，默认值null。dragmove.cropper
事件的简写方式。======
拖动移动中执行
dragend：类型：Function，默认值null。dragend.cropper
事件的简写方式。======
拖动结束执行
zoomin：类型：Function，默认值null。zoomin.cropper
事件的简写方式。 ======
zoomout：类型：Function，默认值null。zoomout.cropper
事件的简写方式。 ======
index.html代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"&
&link rel="stylesheet" href="css/cropper.css"&
&link rel="stylesheet" href="css/main.css"&
&!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&
&!--[if lt IE 9]&
&script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&&/script&
&script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&&/script&
&![endif]--&
&!--[if lt IE 8]&
&p class="browserupgrade"&You are using an &strong&outdated&/strong& browser. Please &a href="http://browsehappy.com/"&upgrade your browser&/a& to improve your experience.&/p&
&![endif]--&
&!-- Content --&
&div class="container" style="margin-top:50"&
&div class="row"&
&div class="col-md-9"&
&!-- &h3&Demo:&/h3& --&
&div class="img-container"&
&div class="col-md-3"&
&!-- &h3&Preview:&/h3& --&
&div class="docs-preview clearfix"&
&div class="img-preview preview-lg"&&/div&
&div class="row"&
&div class="col-md-9 docs-buttons"&
&!-- &h3&Toolbar:&/h3& --&
&div class="btn-group"&
&button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In"&
&span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("zoom", 0.1)"&
&button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out"&
&span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("zoom", -0.1)"&
&div class="btn-group"&
&button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left"&
&span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", -10, 0)"&
&button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right"&
&span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", 10, 0)"&
&button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up"&
&span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, -10)"&
&button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down"&
&span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, 10)"&
&div class="btn-group"&
&button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate Left"&
&span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("rotate", -90)"&
&button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate Right"&
&span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("rotate", 90)"&
&div class="btn-group"&
&button type="button" class="btn btn-primary" data-method="reset" title="Reset"&
&span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("reset")"&
&label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file"&
&input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"&
&span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Import image with Blob URLs"&
&div class="btn-group btn-group-crop"&
&button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 180, "height": 90 }" type="button"&
&!-- Show the cropped image in modal --&
&div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header"&
&h5 class="modal-title" id="getCroppedCanvasTitle"&Cropped&/h5&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&
&span aria-hidden="true"&×&/span&
&div class="modal-body"&&/div&
&div class="modal-footer"&
&button type="button" class="btn btn-secondary" data-dismiss="modal"&Close&/button&
&a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg"&Download&/a&
&/div&&!-- /.modal --&
&/div&&!-- /.docs-buttons --&
&!-- Scripts --&
&script src="js/jquery.min.js"&&/script&
&script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"&&/script&
&script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"&&/script&
&script src="js/cropper.js"&&/script&
&script src="js/main.js"&&/script&
cropper.js部分参数代码：
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
typeof define === 'function' && define.amd ? define(['jquery'], factory) :
(factory(global.$));
}(this, (function ($) { 'use strict';
$ = 'default' in $ ? $['default'] : $;
var DEFAULTS = {
// 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 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 current image is a cross-origin image
checkCrossOrigin: true,
// Check the current image's Exif Orientation information
checkOrientation: 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
ready: null,
cropstart: null,
cropmove: null,
cropend: null,
crop: null,
zoom: null
main.js 代码如下：
$(function () {
'use strict';//表示强规则
var console = window.console || { log: function () {} };
var URL = window.URL || window.webkitURL;
var $image = $('#image');
var $download = $('#download');
//获取图片截取的位置
var $dataX = $('#dataX');
var $dataY = $('#dataY');
var $dataHeight = $('#dataHeight');
var $dataWidth = $('#dataWidth');
var $dataRotate = $('#dataRotate');
var $dataScaleX = $('#dataScaleX');
var $dataScaleY = $('#dataScaleY');
var options = {
aspectRatio: 1 / 1, //裁剪框比例1:1
preview: '.img-preview',
crop: function (e) {
$dataX.val(Math.round(e.x));
$dataY.val(Math.round(e.y));
$dataHeight.val(Math.round(e.height));
$dataWidth.val(Math.round(e.width));
$dataRotate.val(e.rotate);
$dataScaleX.val(e.scaleX);
$dataScaleY.val(e.scaleY);
var originalImageURL = $image.attr('src');
var uploadedImageURL;
// Tooltip
$('[data-toggle="tooltip"]').tooltip();
// Cropper
$image.on({
ready: function (e) {
console.log(e.type);
cropstart: function (e) {
console.log(e.type, e.action);
cropmove: function (e) {
console.log(e.type, e.action);
cropend: function (e) {
console.log(e.type, e.action);
crop: function (e) {
console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
zoom: function (e) {
console.log(e.type, e.ratio);
}).cropper(options);
// Buttons
if (!$.isFunction(document.createElement('canvas').getContext)) {
$('button[data-method="getCroppedCanvas"]').prop('disabled', true);
if (typeof document.createElement('cropper').style.transition === 'undefined') {
$('button[data-method="rotate"]').prop('disabled', true);
$('button[data-method="scale"]').prop('disabled', true);
// Download
if (typeof $download[0].download === 'undefined') {
$download.addClass('disabled');
// Options
$('.docs-toggles').on('change', 'input', function () {
var $this = $(this);
var name = $this.attr('name');
var type = $this.prop('type');
var cropBoxD
var canvasD
if (!$image.data('cropper')) {
if (type === 'checkbox') {
options[name] = $this.prop('checked');
cropBoxData = $image.cropper('getCropBoxData');
canvasData = $image.cropper('getCanvasData');
options.ready = function () {
$image.cropper('setCropBoxData', cropBoxData);
$image.cropper('setCanvasData', canvasData);
} else if (type === 'radio') {
options[name] = $this.val();
$image.cropper('destroy').cropper(options);
// Methods
// 点击开始计算图片位置，获取位置
$('.docs-buttons').on('click', '[data-method]', function () {
var $this = $(this);
var data = $this.data();
if ($this.prop('disabled') || $this.hasClass('disabled')) {
if ($image.data('cropper') && data.method) {
data = $.extend({}, data); // Clone a new one
if (typeof data.target !== 'undefined') {
$target = $(data.target);
if (typeof data.option === 'undefined') {
data.option = JSON.parse($target.val());
} catch (e) {
console.log(e.message);
if (data.method === 'rotate') {
$image.cropper('clear');
result = $image.cropper(data.method, data.option, data.secondOption);
if (data.method === 'rotate') {
$image.cropper('crop');
switch (data.method) {
case 'scaleX':
case 'scaleY':
$(this).data('option', -data.option);
case 'getCroppedCanvas':
//上传头像
if (result) {
var imgBase=result.toDataURL('image/jpeg');
var data={imgBase:imgBase};
$.post('/docs/upload.php',data,function(ret){
if(ret=='true'){
alert('上传成功');
alert('上传失败');
},'text');
case 'destroy':
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
uploadedImageURL = '';
$image.attr('src', originalImageURL);
if ($.isPlainObject(result) && $target) {
$target.val(JSON.stringify(result));
} catch (e) {
console.log(e.message);
// Keyboard
$(document.body).on('keydown', function (e) {
if (!$image.data('cropper') || this.scrollTop & 300) {
switch (e.which) {
e.preventDefault();
$image.cropper('move', -1, 0);
e.preventDefault();
$image.cropper('move', 0, -1);
e.preventDefault();
$image.cropper('move', 1, 0);
e.preventDefault();
$image.cropper('move', 0, 1);
// Import image
var $inputImage = $('#inputImage');
if (URL) {
$inputImage.change(function () {
var files = this.
if (!$image.data('cropper')) {
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
uploadedImageURL = URL.createObjectURL(file);
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
$inputImage.val('');
window.alert('Please choose an image file.');
$inputImage.prop('disabled', true).parent().addClass('disabled');
使用canvas生成的截图转换生成base64代码。
后台处理base64代码片段（PHP服务端）。
upload.php代码如下：
error_reporting(0);//禁用错误报告
if (IS_POST) {
header('Content-type:text/charset=utf-8');
$base64_image_content = $_POST['imgBase'];
//将base64编码转换为图片保存
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
$type = $result[2];
$new_file = "./uploads/";
if (!file_exists($new_file)) {
//检查是否有该文件夹，如果没有就创建，并给予最高权限
mkdir($new_file, 0700);
$img=time() . ".{$type}";
$new_file = $new_file . $
//将图片保存到指定的位置
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) {
echo 'true';
echo 'false';
echo 'false';
实现效果：
选择要截取的图片位置，按“上传头像”按钮，截取的图片就上传并保存到服务器本站点目录的uploads文件夹中。
个人博客：http://www.mambaxin.com
GitHub：https://github.com/kesixin
WeChat：kesixintongxue
来源 https://zhuanlan.zhihu.com/p/ 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇 的番外篇，因为严格来说不是在讲Python而是讲在Python下使用OpenCV。本篇将介绍和深度学习数据处理阶...
?开启? 【iAPP实现进入界面执行逐一显】 〖 15:22:14〗 《//首先开一个线程，因为你有这么多的stop要执行，其次必须使用ufusui（）,否则可能不会显示你的字体。切记:文字必须设置“text=”,否则很尴尬，还有我这里的8,14是两个文...
37 视频滤镜 在配置编译FFmpeg时可以通过--disable-filters来禁止所有滤镜的编译。也可以配置编译脚本来输出所有包含进编译的滤镜信息。 下面是当前可用的视频滤镜介绍。 alphaextract 把输入视频作为灰度视频来提取透明通道，它通常和alphame...
【转】Android 开源项目分类汇总 旭川君已关注
16:49*字数 29527阅读 1795评论 1喜欢 35 来源：https://github.com/Trinea/android-open-project 更多：Android 开源库获取途径...
1.安装oracle-jdk打开终端，使用下面的命令：java -version如果你看到像下面的输出，这就意味着你并没有安装过Java: The program ‘java’ can be found in the following packages:* default...
如果要统计ios开发代码，包括头文件的，终端命令进入项目目录下，命令如下 log 如下列出每个文件的行数 你可以将你需要的文件行数直接相加,或者你可以直接使用下面的命令列出代码行数总和 : log 如下 当你的工程是swift 和OC 混编的情况下,你需要添加 -name ...
最近在网上做公益咨询，发生了一些事情，觉得是对自己的一个提醒，同时反思自己做了什么会发生这样的事情呢！作为一名心理咨询师觉得非常有必要把咨询这件事跟大家讲讲，说说关于心理咨询那些事儿! 关于我的公益咨询你需要了解的 第一、学佛人的基本自我要求 我是佛教徒，那做心理方面的工作...
文|若竹 1 最近《楚乔传》热播，里面的人物性格鲜明：高冷的宇文玥，狠毒的宇文怀，腹黑多疑的燕洵。为什么会有如此巨大的差别呢？ 有热心网友分析了，是他们原生家庭环境造成了不同的性格。 确实，一个人成长时期的家庭环境会影响他的性格和行为模式。 小白是个90后，最近非常烦恼。原...
假期这几天回老家了。乡下的寂寥，少了城市的喧嚣，让人觉得异常放松。 陪家人唠唠家常，听听村里大大小小的奇闻异事，却也像是哥伦布发现新大陆一样一惊一乍。 突然觉得时光一下子慢了下来。听着熟悉的乡音，淳朴的民风，瞬间觉得好心安。 每天叫醒我的也不再是烦人的闹钟，而是鸡鸣狗叫声，...