官方网站 https://www.npmjs.com/package/photoclip
介绍
- 在移动设备上双指捏合为缩放,双指转动为旋转
- 在PC设备上鼠标滚轮为缩放,每次双击则顺时针旋转90度
兼容
IE10及以上版本,Chrome、Firefox、Safari、Android、微信等主流先进浏览器
依赖插件
iscroll-zoom.js
hammer.js
lrz.all.bundle.js
使用方法
<div id="clipArea"></div>
<input type="file" id="file" />
...
<script src="js/iscroll-zoom.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/PhotoClip.js"></script>
<script>
var pc = new PhotoClip('#clipArea');
file.addEventListener('change', function() {
pc.load(this.files[0]);
});
</script>
PhotoClip 构造函数
new PhotoClip( container [, options] )
构造函数有两个主要参数:
container
表示图片裁剪容器的选择器或者DOM对象。
options
配置选项,详细配置如下:
-
size 截取框大小。默认值为
[100,100]
。值为数字或者数组。
当值为数字时,表示截取框为宽高都等于该值的正方形。
当值为数组时,数组中索引[0]
和[1]
所对应的值分别表示宽和高。 -
adaptive 截取框自适应。默认为
''
。类型为:字符串或者数组。
设置该选项后,
size
选项将会失效,此时size
进用于计算截取框的宽高比例。
当值为一个百分数字符串时,表示截取框的宽度百分比。
当值为数组时,数组中索引[0]
和[1]
所对应的值分别表示宽和高的百分比(不是宽与高的百分比,是宽相对于剪裁容器宽的百分比,高相对于剪裁容器高的百分比)。
当宽或高有一项值未设置或值无效时,则该项会根据size
选项中定义的宽高比例自适应。 -
outputSize 输出图像大小(是指剪裁之后图片的大小)。默认值为
[0,0]
,表示输出图像原始大小。类型为数字或者数组。
当值为数字时,表示输出宽度,此时高度根据截取框比例自适应。
当值为数组时,数组中索引[0]
和[1]
所对应的值分别表示宽和高,若宽或高有一项值无效,则会根据另一项等比自适应。 -
outputType 指定输出图片的类型。 默认为 'jpg'。
类型为字符串。
指定输出图片的类型,可选 'jpg' 和 'png' 两种种类型。
-
outputQuality 图片输出质量。
类型为数字。
图片输出质量,仅对 jpeg 格式的图片有效,取值 0 - 1,默认为0.8。(这个质量并不是图片的最终质量,而是在经过 lrz 插件压缩后的基础上输出的质量。相当于
outputQuality
*lrzOption.quality
) -
maxZoom 图片的最大缩放比,默认为 1。
类型为数字。
当值为0.1时,表示图片缩放到最小的比例,不能再缩放了,正好与剪裁框自适应。
-
rotateFree 是否启用图片自由旋转
类型为 Boolean
由于安卓浏览器上存在性能问题,因此在安卓设备上默认关闭。
-
view 显示截取后图像的容器的选择器或者DOM对象
类型为字符串或者dom对象。
显示截取后图像的容器的选择器或者DOM对象。如果有多个,可使用英文逗号隔开的选择器字符串,或者DOM对象数组。
-
file 上传图片选择器或者DOM对象
类型为字符串或者dom对象。
上传图片的
<input type="file">
控件的选择器或者DOM对象。如果有多个,可使用英文逗号隔开的选择器字符串,或者DOM对象数组。 -
ok 确认截图按钮的选择器或者DOM对象
类型为字符串或者dom对象。
确认截图按钮的选择器或者DOM对象。如果有多个,可使用英文逗号隔开的选择器字符串,或者DOM对象数组。
-
img 需要裁剪图片的url地址
类型为字符串。
该参数表示当前立即开始读取图片,不需要使用 file 控件获取。这个可以与其他的上传图片的插件结合使用,将上传好的图片的路径放到此处即可,然后进行剪裁等操作,注意,加载的图片必须要与本程序同源,如果图片跨域,则无法截图。
-
loadStart 图片开始加载的回调函数。
type: Function
this
指向当前PhotoClip
的实例对象,并将正在加载的 file 对象作为参数传入。(如果是使用非 file 的方式加载图片,则该参数为图片的 url) -
loadComplete 图片加载完成的回调函数。
type: Function
this
指向当前PhotoClip
的实例对象,并将图片的 <img> 对象作为参数传入。 -
loadError 图片加载失败的回调函数。
type: Function
this
指向当前PhotoClip
的实例对象,并将错误信息作为第一个参数传入,如果还有其它错误对象或者信息会作为第二个参数传入。 -
done 裁剪完成的回调函数。
type: Function
this
指向当前PhotoClip
的实例对象,会将裁剪出的图像数据DataURL作为参数传入。 -
fail 裁剪失败的回调函数。
type: Function
this
指向当前PhotoClip
的实例对象,会将失败信息作为参数传入。 -
lrzOption lrz 压缩插件的配置参数
type: Object
该压缩插件作用于图片从相册输出到移动设备浏览器过程中的压缩,配置的高低将直接关系到图片在移动设备上操作的流畅度,副作用是会大大的降低图片的质量。以下为子属性:
-
lrzOption.width:
type: Number
图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。(由于安卓浏览器存在性能问题,所以默认值为 1000)
-
lrzOption.height
type: Number
图片最大不超过的高度,默认为原图高度,宽度不设时会适应高度。(由于安卓浏览器存在性能问题,所以默认值为 1000)
-
lrzOption.quality
type: Number
图片压缩质量,仅对 jpeg 格式的图片有效,取值 0 - 1,默认为0.7。(这个质量不是最终输出的质量,与
options.outputQuality
是相乘关系)
-
-
style 样式配置。
type: Object
以下为子属性:
-
style.maskColor
type: String
遮罩层的颜色。默认为
'rgba(0,0,0,.5)'
。 -
style.maskBorder
type: String
遮罩层的 border 样式。默认为
'2px dashed #ddd'
。 -
style.jpgFillColor
type: String
当输出 jpg 格式时透明区域的填充色。默认为
'#fff'
。
-
-
errorMsg 错误信息对象
type: Object
错误信息对象,包含各个阶段出错时的文字说明。以下为子属性:
-
errorMsg.noSupport
type: String
浏览器无法支持本插件。将会使用
alert
弹出该信息,若不希望弹出,可将该值置空。 -
errorMsg.imgError
type: String
使用 file 控件读取图片格式错误时的错误信息。将会在
loadError
回调的错误信息中输出。 -
errorMsg.imgHandleError
type: String
lrz 压缩插件处理图片失败时的错误信息。将会在
loadError
回调的错误信息中输出。 -
errorMsg.imgLoadError
type: String
图片加载出错时的错误信息。将会在
loadError
回调的错误信息中输出。 -
errorMsg.noImg
type: String
没有加载完成的图片时,执行截图操作时的错误信息。将会在
fail
回调的失败信息中输出。 -
errorMsg.clipError
type: String
截图出错时的错误信息。将会在
fail
回调的失败信息中输出。
-
PhotoClip 对象实例方法
var pc = new PhotoClip('#clipArea',{ .... })
1. 截图 返回截取后图片的 Base64 字符串
pc.clip();
2. 图片缩放到指定比例,如果超出缩放范围,则会被缩放到可缩放极限,缩放比例,取值在 0 - 1 之间,
pc.scale(缩放比例 , 缩放动画的时长);
3. 图片旋转到指定角度
pc.rotate(旋转的角度,旋转动画的时长);
4. 设置截取框的宽高
pc.size(width, height);
5. 加载一张图片 src 图片的 url,或者图片的 file 文件对象
pc.load(src);
6. 清除当前图片
pc.clear();
7. 销毁
pc.destroy();
这是一个小demo
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>PhotoClip</title>
<style>
body {
margin: 0;
text-align: center;
}
#clipArea {
height: 100vh;
width: 100vw;
}
#file{
position: absolute;
left: 0px;
bottom: 10vh;
}
#clipBtn {
position: absolute;
right: 0px;
bottom: 10vh;
}
.k{
width: 160px;
height: 160px;
position: absolute;
left: 0;
right: 0;
top: 0;
margin: auto;
bottom: 0;
border: 1px solid black;
}
</style>
</head>
<body ontouchstart="">
<div class="k"></div>
<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom-min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/PhotoClip.js"></script>
<script>
var pc = new PhotoClip('#clipArea', {
size: 160,
outputSize: 240,
file: '#file',
view: '.k',
ok: '#clipBtn',
loadStart: function() {
console.log('开始读取照片');
},
loadComplete: function() {
console.log('照片读取完成');
},
done: function(dataURL) {
console.log(dataURL);
},
fail: function(msg) {
alert(msg);
}
});
$("#clipBtn").click(function(){
$("#clipArea").hide();
$("#clipBtn").hide();
})
</script>
</body>
</html>
运行之后:
点击选择文件,然后点截取
本文demo中所使用的photoclip及以来插件的下载