【vue】canvas图片剪切

对图片进行遮挡有 overflow: hidden、clip-path 以及 mask-image。
overflow是进行超出不显示，通过父元素遮挡超出部分。但是效果不理想。
clip-path是进行裁剪，但是裁剪之后image所占空间不会改变。在线工具
mask-image是进行image遮挡，没有实践，据说遮挡之后image所占空间不会改变。
最后，还是选择使用canvas进行裁剪工作。
image会存在底部有间隙的问题？
解决办法：对image设置display:block;

一、图片剪裁

1. 处理思路
   首先创建canvas对像。
   指定canvas的高度宽度。
   计算原图需要剪切的相关参数。
   通过drawImage方法将需要的部分画上去。
   通过toDataURL方法获取图片base64的值。
   完成，后续可对base64值进行其他操作。
2. 关键方法
   最主要的drawImage方法有一下传参方式：

drawImage(img, dx, dy)
drawImage(img, dx, dy, dw, dh)
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
各参数说明：

img：需要插入的img/video/canvas 元素。
dx/dy：canvas的开始绘制点位。
dw/dh：canvas的绘制区域大小。
sx/sy：image的开始绘制点位。
sw/wh：image的绘制区域大小。

二、源码
我这里做的是九宫格所以对每一个块进行不同的裁剪。

createCanvasToImg(key, url){
                if (!url){
                    this.sudokuImg[key] = canvasToImg;
                    return
                }
                let canvas, context;
                // canvas 转 image
                let canvasToImg;
                // 创建canvas
                canvas = document.createElement("canvas");
                context = canvas.getContext("2d");
                // 加载资源
                let luckyCardImg = new Image();
                luckyCardImg.setAttribute("crossOrigin", "anonymous");  // 解决跨域 Canvas 污染问题
                luckyCardImg.src = url + '?time=' + Date.now();
                luckyCardImg.onload =  () => {
                    canvas.width = luckyCardImg.width;
                    canvas.height = luckyCardImg.height;
                    // 注入幸运卡
                    switch (key) {
                        case 1:
                            context.drawImage(luckyCardImg, 0, 0, luckyCardImg.width*0.91, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);
                            break;
                        case 2:
                            context.drawImage(luckyCardImg, luckyCardImg.width*0.09, 0, luckyCardImg.width*0.82, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);
                            break;
                        case 3:
                            context.drawImage(luckyCardImg, luckyCardImg.width*0.09, 0, luckyCardImg.width*0.91, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);
                            break;
                        case 4:
                            context.drawImage(luckyCardImg, 0, luckyCardImg.height*0.09, luckyCardImg.width*0.91, luckyCardImg.height*0.82, 0, 0, luckyCardImg.width, luckyCardImg.height);
                            break;
                        case 5:
                            context.drawImage(luckyCardImg, luckyCardImg.width*0.09, luckyCardImg.height*0.09, luckyCardImg.width*0.82, luckyCardImg.height*0.82, 0, 0, luckyCardImg.width, luckyCardImg.height);
                            break;
                        case 6:
                            context.drawImage(luckyCardImg, luckyCardImg.width*0.09, luckyCardImg.height*0.09, luckyCardImg.width*0.91, luckyCardImg.height*0.82, 0, 0, luckyCardImg.width, luckyCardImg.height);
                            break;
                        case 7:
                            context.drawImage(luckyCardImg, 0, luckyCardImg.height*0.09, luckyCardImg.width*0.91, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);
                            break;
                        case 8:
                            context.drawImage(luckyCardImg, luckyCardImg.width*0.09, luckyCardImg.height*0.09, luckyCardImg.width*0.82, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);
                            break;
                        case 9:
                            context.drawImage(luckyCardImg, luckyCardImg.width*0.09, luckyCardImg.height*0.09, luckyCardImg.width*0.91, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);
                            break;
                        default:
                            break;
                    }
                    canvasToImg = canvas.toDataURL("image/png");
                    this.sudokuImg[key] = canvasToImg;
                }
            },

结果如下：