效果图:
想跳过原理说明的小伙伴可直接下载使用,下载地址和使用说明请点下面链接
https://github.com/caohoucheng/shear-picture
正文
如上图所示实现拖动裁剪区域来裁剪图片,当然,这个demo有些功能不全的地方,会在后续将功能补充上去
实现原理
1.选择图片,展示
2.定义裁剪框,并且可拖动
3.拖动过程中,预览结果
4.确认,将裁剪后结果保存
1.选择图片,展示
选择图片
选择图片当然是input标签 file类型,可选文件类型为图片accept="image/*"
<input type="file" class="selImg" accept="image/*" multiple="">
展示
图片选择完之后如何展示呢?
我们这里使用的是FileReader
FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件
参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
document.querySelector('.selImg').onchange = function(e) {
var reader = new FileReader();
// 调用readAsDataURL函数在后台开始读取文件的操作。当整个图片文件被全部加载完后，他们被转换成了一个被传递到onload回调函数的data:URL
reader.readAsDataURL(this.files[0]);
reader.onload = function(e) {
var dataURL = reader.result;
document.querySelector('#tulip').src = dataURL;//展示
}
});
reader.result就是所选择图片后生成图片的base64格式,可以赋值给image标签展示
2.定义裁剪框,并且可拖动
定义裁剪框
裁剪框展示区域是用div+background-position来展示,本来是用canvas drawimage来展示和保存的,但运行效率太低
所以用div+background-position来展示,canvas drawimage来保存
裁剪框的定义,我选择的是以所选图片的最短一边来当做裁剪框(正方形)的边长,可能有人发现我上面裁剪区是个圆,那是因为添加了border-radiu:50%,可先忽略
var imgW = document.querySelector('#tulip').width;//图片宽
var imgH = document.querySelector('#tulip').height;//图片高
// 图片高>图片宽
if (imgH > imgW) {
document.querySelector('#show-content').style.width=`${imgW}px`;
document.querySelector('#show-content').style.height=`${imgW}px`;
} else {
document.querySelector('#show-content').style.width=`${imgH}px`;
document.querySelector('#show-content').style.height=`${imgH}px`;
}
background-position需要定位图片位置,所以我们在给裁剪框定宽高的时候,根据裁剪框相对图片的左边距和上边距,来确认background-position的值
var imgW = document.querySelector('#tulip').width;
var imgH = document.querySelector('#tulip').height;
//左边距上边距
var left, top;
// 图片高>图片宽
if (imgH > imgW) {
// 画布宽高=图片宽
canvas.width = imgW;
canvas.height = imgW;
document.querySelector('#show-content').style.width=`${imgW}px`;
document.querySelector('#show-content').style.height=`${imgW}px`;
left = 0;
top = (imgH - imgW) / 2;
} else {
// 画布宽高=图片高
canvas.width = imgH;
canvas.height = imgH;
document.querySelector('#show-content').style.width=`${imgH}px`;
document.querySelector('#show-content').style.height=`${imgH}px`;
left = (imgW - imgH) / 2;
top = 0;
}
// document.querySelector('#myCanvas').style.left = left + 'px';
// document.querySelector('#myCanvas').style.top = top + 'px';
document.querySelector('#show-content').style.left = `${left}px`;
document.querySelector('#show-content').style.top = `${top}px`;
document.querySelector('#show-content').style.background=`url(${dataURL})`;
document.querySelector('#show-content').style.backgroundSize=`${imgW}px`;
document.querySelector('#show-content').style.backgroundPosition=`-${left}px -${top}px`;
3.拖动过程中,预览结果
拖动
拖动的实现pc端和移动端是不同的
移动端:touch事件(触摸事件)
pc端:mouse事件(鼠标事件)
所以就进行了pc端/移动端的判断
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
//移动端,使用touch事件
}else{
//pc端,使用mouse事件
}
然后根据 鼠标/手势 触摸点来修改裁剪框定位以及裁剪框background-position的值来实现预览效果
代码就不贴了,一会会附上源码
4.确认,将裁剪后结果保存
在我们确认了图片裁剪区后,进行保存,
结果保存
//先清空画布内容
ctx.clearRect(0, 0, canvas.width, canvas.height);
//在根据我们所获取的值填充画布
ctx.drawImage(img, _left, _top, _width, _height);
//将画布内容保存下来
var result=canvas.toDataURL("image/png");
基本就这样了,源码地址以及详细的使用方法都贴在下面,小伙伴们自行下载
https://github.com/caohoucheng/shear-picture
对你有帮助的话给项目一个小星星哦
