效果图:

1.gif

想跳过原理说明的小伙伴可直接下载使用,下载地址和使用说明请点下面链接

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
对你有帮助的话给项目一个小星星哦

image.png