用canvas实现图片的剪裁、移动、缩放

前言

由于前段时间需要做一个图片裁剪的小项目，具备的功能有移动，缩放、裁剪，由于计算复杂，网上也找过一些插件，但是多多少少都有些问题，与我自己项目的需要不一致，要么就是缩放移动的时候会有卡顿，闪烁的问题所以我就自己做了一个，但是因为其中思路转变的复杂我就不在这里描述直接教你们怎么用

//引入封装好的代码
import CutImage from "../utils/CutImage";
//使用
const bgCanvas = document.getElementById('bgCanvas');
const cutCanvas= document.getElementById('cutCanvas');
const w = bgCanvas .offsetWidth;
const h = bgCanvas .offsetHeight;
const cut =  new CutImage({
                bgCanvas:document.getElementById('bgCanvas'),
                cutCanvas:document.getElementById('cutCanvas),
                img:require('./assets/images/2.jpg'),
               cutShape:[
                    {x:w/2,y:0},
                    {x:w,y:h},
                    {x:0,y:h},
                ],//[arc,prismatic,rect]=[圆，棱形，矩形]
            })
  //cutShape:参数是裁剪宽的样式，接收一个坐标数组（[x:0,y:0]）或是一个字符串（arc、		  prismatic、rect）
  //调用toDataURL方法返回裁剪图片base64的数据
  cut.toDataURL();
  //调用destroy()方法会销毁改该示例对内存的占用
  cut.destroy();

效果示意图

demo代码地址

**https://github.com/Mengsui1/utils/blob/master/src/components/CutImg.vue
**

期望

因为我还算是个小白，如果代码中有什么bug或是更好的实现方式欢迎评论指出

需要注意

1：有些机型在获取图片后图片会发现90°旋转（比如微信获取图片大小超过一定限制后就会发生旋转，可以试试exif-js这个插件去处理），请先处理还这个问题后在将图片数据传递给img参数
2：ios在某一些系统版本下可能，图片加载直接会走onerror分支并抛出一个（clipboardData：undefind错误），具体解决方法可以参考一下这篇文章《移动端File和Base64的坑》（作者遇到的是ios v10.3我遇到的是ios v9.1.x）结局的思路是将base64转为Blob对象然后在调用URL.createObjectURL(Blob)就可以了