js截取图片 裁剪图片之cropper.js插件用法详解
js截取图片 裁剪图片之cropper.js插件用法详解
源码:https://github.com/fengyuanchen/cropper
引入+使用
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
HTML结构
<!-- 用一个块元素(容器)包装图像或画布元素 -->
<div class="box"><img id="image" src="picture.jpg">
</div>
这里注意,直接设置
img
的宽高是没有效果的,但是可以在父盒子上(即.box
)设置;
官网上的是以下面的一段代码进行引入的
var cropper = new Cropper(image, {aspectRatio: 16 / 9,viewMode:1,crop: 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);}});
这里有个问题如果使用本地的cropper.js和cropper.css;就会报错(绝对的版本号的问题v1.x版本),而使用cdn方法报错就可以解除;
cdn的链接;如果使用本地的文件(v3.x版本)则写法变为
$('#image').cropper({aspectRatio: 16 / 9,viewMode:1,crop: function (e) {console.log(e);}});
一个简单的demo就出现了;效果图
;
参数options
viewMode—定义cropper的视图模式
类型:number;默认:0;可以使用0,1,2,3;
0:没有限制,3可以移动到2外。
1 : 3只能在2内移动。
2:2图片 不全部铺满1 (即缩小时可以有一边出现空隙)
3:2图片填充整个1dragMode —-定义cropper的拖拽模式。
类型: String
默认: ‘crop’
选项:
‘crop’: 可以产生一个新的裁剪框3
‘move’: 只可以移动3
‘none’: 什么也不处理aspectRatio—-裁剪框的宽高比
类型:number;默认:NAN;
在默认的时候。可以随意改变裁剪框的大小;我这里的设置的值为 16/9;data—如果您已经存储了以前的数据,那么在构建时将会自动将其传递给setData方法。(具体怎么用还不知道)
类型:
object
;默认:null;preview—-添加额外的元素(容器)以供预览
类型:Element / String 默认:“ ”;
注意这里是一个dom元素。必须可以被Document.querySelectorAll
获取到;
preview:".small",
HTML结构:<div class="small"></div>
;注意一定要设置small
的宽高;最好和裁剪比例一致;还有如果要想正确的显示出裁剪的区域需要加上样式overflow: hidden;
去掉overflow: hidden;
效果图如下:
感觉成了一个放大镜;responsive—在调整窗口大小的时候重新渲染cropper
类型:
Boolean
默认:true;restore—在调整窗口大小后恢复裁剪的区域。
类型:
Boolean
默认:true;checkCrossOrigin—-检查当前图像是否为跨域图像。
类型:
Boolean
默认:true;checkOrientation—-检查当前图像的Exif定向信息。(不知道干什么用的)
类型:
Boolean
默认:true;
好像是移动端选择发生旋转变化的时候,触发的事件。modal—显示图片上方的黑色模态并在裁剪框下面。
类型:
Boolean
默认:true;
改成false效果图为:
guides—显示在裁剪框上方的虚线。
类型:
Boolean
默认:true;
改成false效果图为:
center—裁剪框在图片正中心。
类型:
Boolean
默认:true;highlight–在裁剪框上方显示白色的区域(突出裁剪框)。
类型:
Boolean
默认:true;background–显示容器的网格背景。(就是后面的马赛克)
类型:
Boolean
默认:true;autoCrop–当初始化时,可以自动生成图像。(就是自动显示裁剪框,改成false裁剪框自动消失)
类型:
Boolean
默认:true;
改成false效果图为:
autoCropArea–定义自动裁剪面积大小(百分比)和图片进行对比。
类型:
number
默认:0.8;
就是裁剪框显示的大小movable–是否允许可以移动后面的图片
类型:
Boolean
默认:true;rotatable–是否允许旋转图像。
类型:
Boolean
默认:true;scalable–是否允许缩放图像。
类型:
Boolean
默认:true;zoomable–是否允许放大图像。
类型:
Boolean
默认:true;zoomOnTouch–是否可以通过拖动触摸来放大图像。
类型:
Boolean
默认:true;zoomOnWheel–是否可以通过移动鼠标来放大图像。
类型:
Boolean
默认:true;wheelZoomRatio–用鼠标移动图像时,定义缩放比例。
类型:
Number
默认:0.1;cropBoxMovable—是否通过拖拽来移动剪裁框。
类型:
Boolean
默认:true;
改成false效果图为:剪裁框不可以拖动。cropBoxResizable—是否通过拖动来调整剪裁框的大小。
类型:
Boolean
默认:true;
改成false效果图为:剪裁框不可以调整大小。toggleDragModeOnDblclick—当点击两次时可以在“crop”和“move”之间切换拖拽模式,
类型:
Boolean
默认:true;minContainerWidth—容器的最小宽度。
类型:
Number
默认:200;minContainerHeight—容器的最小高度。
类型:
Number
默认:100;minCanvasWidth—canvas的最小宽度。
类型:
Number
默认:0;minCanvasHeight—canvas的最小高度。
类型:
Number
默认:0;minCropBoxWidth—裁剪层的最小宽度。
类型:
Number
默认:0;minCropBoxHeight—裁剪层的最小高度。
类型:
Number
默认:0;ready—插件准备完成执行的函数(只执行一次)。
类型:
Function
默认:null
;cropstart—剪裁框开始移动执行的函数。
类型:
Function
默认:null
;cropmove—剪裁框移动时执行的函数。
类型:
Function
默认:null
;cropend—剪裁框移动结束执行的函数。
类型:
Function
默认:null
;crop—剪裁框发生变化执行的函数。
类型:
Function
默认:null
;zoom—剪裁框缩放的时候执行的函数。
类型:
Function
默认:null
;
$('#image').cropper({aspectRatio: 16 / 9,viewMode:1,dragMode:'none',preview:".small",responsive:false,restore:false,
// modal:false,
// guides:false,
// background:false,
// autoCrop:false,
// autoCropArea:0.1,
// movable:false,
// scalable:false,
// zoomable:false,
// wheelZoomRatio:false,
// cropBoxMovable:false,
// cropBoxResizable:false,ready:function () {console.log("ready");},cropstart: function (e) {console.log("cropstart");},cropmove: function (e) {console.log("cropmove");},cropend: function (e) {console.log("cropend");},crop: function (e) {console.log("crop");},zoom: function (e) {console.log("zoom");},});
Methods 方法
使用方法示例:
$().cropper({ready: function () {$().cropper('method', argument1, , argument2, ..., argumentN);}
});
- crop() 手动显示裁剪框
$("#image").cropper({autoCrop: false, //关闭自动显示裁剪框ready: function () {$(this).cropper('crop');}
});
2 . reset()—-将图像和裁剪框重置为初始状态
<button id="reset">reset</button>
//-----------------------------
$("#reset").on("click", function () {$('#image').cropper('reset');})
3 . clear()—清除裁切框
$("#clear").on("click", function () {$('#image').cropper('clear');})
4 . replace(url[, onlyColorChanged])—替换图像的src并重新构建cropper
url :–类型
String
;—新图片的url;
onlyColorChanged (optional):–类型:Boolean
默认:false;—-如果只是改变颜色,而不是大小,那么cropper只需要改变所有相关图像的src,不需要重新构建cropper。这可以用于应用过滤器。(意思是:改成true,图像的比例会发生变化自适应父盒子的大小;会失真的)
$("#replace").on("click", function () {$('#image').cropper('replace',"./images/111.jpeg",true );})
5 . enable()—解锁,锁定的裁切框(与disable相对应)
$("#enable").on("click", function () {$('#image').cropper('enable');})
6 . disable()—锁定的裁切框(裁切框不可移动)(与enable相对应)
$("#disable").on("click", function () {$('#image').cropper('disable');})
7 . destroy()—销毁cropper并从图像中删除整个cropper。
$("#destroy").on("click", function () {$('#image').cropper('destroy');})
8 . move(offsetX[, offsetY])—使用相对偏移量移动图像(裁切框不移动)。
offsetX–类型:
Number
;在水平方向上移动(px)
offsetY –类型:Number
;在垂直方向上移动(px);如果不存在,其值和offsetX相同;
$("#move1").on("click", function () {$('#image').cropper('move', 1, 0);})$("#move2").on("click", function () {$('#image').cropper('move', 0, -1);})
9 . moveTo(x[, y])—-将画布(图像包装器)移动到一个绝对点
X–类型:
Number
;画布canvas距离left的值;
Y –类型:Number
;画布canvas距离top的值;如果不存在,其值和X相同;
10 . zoom(ratio)—放大图片,并使用相对比例。(裁切框不变化)
$('#image').cropper('zoom', 0.1);
$('#image').cropper('zoom', -0.1);
11 . zoomTo(ratio)—-将画布(图像包装器)放大到一个绝对比例
ratio:类型
Number
—要放大的比例
$('#image').cropper('zoomTo', 1); // 1:1 (canvasData.width === canvasData.naturalWidth)
12 . rotate(degree)—旋转图像以一定的角度
degree—类型:
Number
向右旋转 (degree > 0);向左旋转 (degree < 0);
$('#image').cropper('rotate', 90);
$('#image').cropper('rotate', -90);
13 . rotateTo(degree)—旋转图像到固定的角度
degree—类型:
Number
14 . scale(scaleX[, scaleY])—-翻转图像
scaleX–类型:
Number
;水平方向翻转;默认为 1
scaleY–类型:Number
;垂直方向翻转;如果不存在,其值和scaleX相同;
$('#image').cropper('scale', -1); // 水平、垂直方向翻转
$('#image').cropper('scale', -1, 1); // 水平方向翻转
$('#image').cropper('scale', 1, -1); // 垂直方向翻转
15 . scaleX(scaleX)—-缩放图像的横坐标。
类型:
Number
;水平方向翻转;默认为 1
16 . scaleY(scaleY)—-缩放图像的纵坐标。
类型:
Number
;垂直方向翻转;默认为 1
$('#image').cropper('scaleX', 1);
17 . getData([rounded])—-输出最终裁剪的区域位置和大小数据(根据原始图像的自然大小
rounded 类型:
Boolean
默认:false
;设置true可以获取其所有数据;
返回的数据类型:Object
;
-x
裁切框距离左边的距离
-y
裁切框距离顶部的距离
-width
裁切框的宽度
-height
裁切框的高度
-rotate
裁切框的旋转的角度
-scaleX
缩放图像的横坐标
-scaleY
缩放图像的纵坐标
$("#getData").on("click", function () {console.log($('#image').cropper('getData', true));;})
18 . setData(data)—用新数据改变裁切区域的位置和大小(以原始图像为基础)。
data–类型:
Object
;
$("#setData").on("click", function () {$('#image').cropper('setData',{width:200,height:100});})
19 . getContainerData()—输出container 容器大小数据。
返回的数据类型:
Object
;
- width当前容器的宽
- height当前容器的高
$("#getContainerData").on("click", function () {console.log($('#image').cropper('getContainerData', ));;})
20 . getImageData()—-输出图像image位置、大小和其他相关数据。
返回的数据类型:
Object
;
-left
image距离左边的距离
-top
image距离顶部的距离
-width
image的宽度
-height
image的高度
-naturalWidth
image的原始宽度
-naturalHeight
image的原始高度
-aspectRatio
image的纵横比
-rotate
image的旋转的角度
-scaleX
缩放图像的横坐标
-scaleY
缩放图像的纵坐标
$("#getImageData").on("click", function () {console.log($('#image').cropper('getImageData', ));;})
21 . getCanvasData()—输出画布Canvas(图像包装器)位置和大小数据。
返回的数据类型:
Object
;
-left
canvas距离左边的距离
-top
canvas距离顶部的距离
-width
canvas的宽度
-height
canvas的高度
-naturalWidth
canvas的原始宽度
-naturalHeight
canvas的原始高度
;
*注意*getImageData()和getCanvasData()的naturalWidth
、naturalHeight
的值是一样的;
22 . setCanvasData(data)—:使用数据更改画布Canvas(图像包装器)位置和大小。
返回的数据类型:
Object
;
-left
canvas距离左边的距离
-top
canvas距离顶部的距离
-width
canvas的宽度
-height
canvas的高度
$("#setCanvasData").on("click", function () {$('#image').cropper('setCanvasData',{width:200,height:100});})
23 .getCropBoxData()—输出剪切框的位置和大小数据。
返回的数据类型:
Object
;
-left
剪切框距离左边的距离
-top
剪切框距离顶部的距离
-width
剪切框的宽度
-height
剪切框的高度
$("#getCropBoxData").on("click", function () {console.log($('#image').cropper('getCropBoxData'));;})
24 . setCropBoxData(data)—–改变剪切框的位置和大小数据。
data的数据类型:
Object
;
-left
剪切框距离左边的距离
-top
剪切框距离顶部的距离
-width
剪切框的宽度
-height
剪切框的高度
$("#setCropBoxData").on("click", function () {$('#image').cropper('setCropBoxData',{width:200,height:100});})
25 . getCroppedCanvas([options])—画一张剪裁的图片。如果没有剪裁,则返回一个绘制整个im的画布(这个感觉很有用)
options 类型
Object
-width
输出Canvas的宽度
-height
输出Canvas的高度
-minWidth
输出Canvas的最小宽度;默认值是0
-minHeight
输出Canvas的最小高度;默认值是0
-maxWidth
输出Canvas的最大宽度;默认值是Infinity
(无穷大)
-maxHeight
输出Canvas的最大高度;默认值是Infinity
(无穷大)
-fillColor
在输出画布Canvas中填充任何alpha的颜色,默认值是透明的
-imageSmoothingEnabled
如果图像被设置为平滑(true,默认)或不设置(false)。
-imageSmoothingQuality
设置图像的质量,一个“low
”(默认)、“medium
”或“high
”。
返回值:类型:HTMLCanvasElement
画布绘制出了剪裁过的图像
注意:输出canvas画布的宽高比将自动适应剪切框的纵横比。
如果您打算从输出画布canvas中获得一个JPEG图像,您应该首先设置填色选项,否则,JPEG图像中的透明部分将在缺少情况下变为黑色。
为了避免获得空白的输出图像,您可能需要将maxWidth和maxHeightproperties设置为有限的数字,从而来画布元素的大小限制。
$("#getCroppedCanvas").on("click", function () {console.log($('#image').cropper('getCroppedCanvas'));;var cas=$('#image').cropper('getCroppedCanvas');var base64url=cas.toDataURL('image/jpeg');cas.toBlob(function (e) {console.log(e); //生成Blob的图片格式})console.log(base64url); //生成base64图片的格式$('.cavans').html(cas) //在body显示出canvas元素})
$('#image').cropper('getCroppedCanvas', {width: 160,height: 90,minWidth: 256,minHeight: 256,maxWidth: 4096,maxHeight: 4096,fillColor: '#fff',imageSmoothingEnabled: false,imageSmoothingQuality: 'high',
});// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
$('#image').cropper('getCroppedCanvas').toBlob(function (blob) {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
;是一个正数
$("#setAspectRatio").on("click", function () {$('#image').cropper('setAspectRatio',1/1);})
27 . setDragMode([mode])—-设置拖拽模式(就是鼠标显示的是十字还是那种带箭头的十字)
mode 类型
String
;取值:none
、crop
、move
;默认是none
Events 事件
ready—当一个cropper实例完全构建时,这个事件就会发生。
cropstart—当画布(图像包装器)或剪切框开始发生变化时,该事件就会发生。
返回的参数有
event.originalEvent:
;类型event
;参数:mousedown
,touchstart
和pointerdown
;即触发的事件源
event.action:
:发生事件的行为(移动的方向)
crop
:创建一个剪切框的时候move
:移动图片的时zoom
:放大缩小canvas的时候e
:调整剪切框东侧的大小w
:调整剪切框西侧的大小s
:调整剪切框南侧的大小n
:调整剪切框北侧的大小se
:东南sw
:西南ne
:东北nw
:西北all
:所有方向
$('#image').on('cropstart', function (e) {console.log(e.type); // cropstartconsole.log(e.namespace); // cropperconsole.log(e.action); // ...console.log(e.originalEvent.pageX);// Prevent to start cropping, moving, etc if necessaryif (e.action === 'crop') {e.preventDefault();}
});
cropmove—当画布(图像包装器)或剪切框正在发生变化时,该事件就会发生;
返回的参数有
event.originalEvent:
;类型event
;参数:mousemove
,touchmove
和pointermove
;即触发的事件源
event.action:
:发生事件的行为(移动的方向) 和cropstart
的相同
cropend—当画布(图像包装器)或剪切框正在发生变化结束时,该事件就会发生;
返回的参数有
event.originalEvent:
;类型event
;参数:mouseup
,touchend
、pointerup
、pointercancel
和touchcancel
;即触发的事件源
event.action:
:发生事件的行为(移动的方向) 和cropstart
的相同
crop—当画布(图像包装器)或农作物盒发生改变时,该事件就会发生。
- event.x
- event.y
- event.width
- event.height
- event.rotate
- event.scaleX
- event.scaleY
这些参数的含义去参照getData
;
zoom—当一个cropper实例开始放大或缩小画布(图像包装器)时,这个事件就会发生。
返回的参数有
event.originalEvent:
;类型event
;参数:wheel
,touchmove
;即触发的事件源
event.oldRatio:
类型number
;当前canvas的裁切比例
event.ratio:
类型number
;新的canvas的裁切比例(canvasData.width / canvasData.naturalWidth)
$().on('zoom', function (e) {// Zoom inif (e.ratio > e.oldRatio) {// Prevent zoom ine.preventDefault();}// Zoom out// ...
});
最后女神镇楼
自己写的比较好理解;
究极的demo
代码下载地址:GitHub - melodyne/cropper: js图片裁剪cropper.js插件
js截取图片 裁剪图片之cropper.js插件用法详解相关推荐
- html图片标签img的介绍以及基本用法详解
<img> 元素向网页中嵌入一幅图像.<img> 标签有两个必需的属性:src 属性 和 alt 属性. 必需的属性 属性 值 描述 alt text 规定图像的替代文本. s ...
- 【JS基础】var formdata=new FormData() 【FormData用法详解 】
FormData用法详解 简介 FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即将form 中表单元素的 name 与 value 组装成一个 queryString 2.异步 ...
- Python中列表截取(Slice,即冒号 : )的用法详解
1. 基本用法 a[start:stop] # 从 index=start 开始(即包含start),到 index=stop-1(即不包含stop) a[start:] # 从 index=star ...
- js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
- php 合并数组对象,JS内数组合并方法与对象合并实现步骤详解
这次给大家带来JS内数组合并方法与对象合并实现步骤详解,JS内数组合并方法与对象合并实现的注意事项有哪些,下面就是实战案例,一起来看一下. 1 数组合并 1.1 concat 方法var a=[1,2 ...
- highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
- html5 游戏 算法,JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】...
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解[圆形情况] 发布时间:2020-10-10 13:42:43 来源:脚本之家 阅读:95 作者:krapnik 本文实例讲述了JS/HTML ...
- js中小括号()的用法详解
一.js中小括号()的用法详解 1.作为分组运算符: 分组运算符应该是再熟悉不过了,因为在小学数学中就有应用,例如: var a=(1+2)*4; console.log(a); 以上代码的输出值是1 ...
- php输出圆周率100位,JS计算圆周率到小数点后100位实现步骤详解
这次给大家带来JS计算圆周率到小数点后100位实现步骤详解,JS计算圆周率到小数点后100位的注意事项有哪些,下面就是实战案例,一起来看一下. 浮点数的有效数位是16位,我自己做了一个大数类,能存储1 ...
最新文章
- Bootstrap 栅格 样式 组件 插件
- linux 密码策略设置,设置Linux密码策略
- makemoney 秘密
- 阿里云服务器CentOS6.8安装JDK
- 信息学奥赛一本通(1121:计算矩阵边缘元素之和)
- Java定义字符串(2种方式)
- java 并发集合_《Java 7并发编程实战手册》第六章并发集合
- 最适合晚上睡不着看的 8 个网站,建议收藏哦
- unity 0 Asset Store ,package如何快速导入,快捷键
- unity3d 怎么生成网页版_unity3D u3D网页游戏制作游戏优势
- 面试必备 | 机器学习这十大算法你确定会了吗?
- 双网卡上网冲突解决_【优特普.安防百科】交换机组网最常见的8大故障及解决方式...
- flink watermark 生成机制与总结
- 运动控制专题——PPU
- ubuntu 18.04 卸载firebox
- (纪录片)数学的故事 The Story of Maths (2008)
- ubuntu14.04下推荐的工具及插件
- 网页代码基本结构以及html标签的使用
- Android Studio中的mavenCentral、jcenter、google仓库
- 21天学通Java学习笔记-Day04