裁剪图片 angular

drawCanvas(img_url) {
        const communityThis = this;
        let image, swidth, sheight, source, cover, target, draging, zoom;
        // init
        this.sourceWidth = 500;  // 显示图片宽度
        this.coverWidth = 200;  // 选区框宽度
        this.targetWidth = 100;  // 预览框宽度
        this.targetX = 0;  // 目标点 X 坐标
        this.targetY = 0;  // 目标点 Y 坐标
        this.scale = 1;  // 压缩比
        image = new Image();
        image.src = img_url;
        // image.setAttribute('crossOrigin', 'Anonymous');
        image.onload = () => {
            draging = false;  // 是否移动选取框
            zoom = false;  // 是否缩放选取框
            swidth = image.width;
            sheight = image.height;
            communityThis.scale = communityThis.sourceWidth / swidth >= 1 ? 1 : communityThis.sourceWidth / swidth;  // 压缩比
            if (swidth >= sheight) {  // cover area width， 选取框宽度 = min(原图高， 原图宽，前面定义的选取框宽)
                communityThis.coverWidth = sheight > communityThis.coverWidth ? communityThis.coverWidth : sheight * communityThis.scale;
            } else {
                communityThis.coverWidth = swidth > communityThis.coverWidth ? communityThis.coverWidth : swidth * communityThis.scale;
            }
            communityThis.sourceWidth = communityThis.scale >= 1 ? swidth : communityThis.sourceWidth; // source image width， 如果原图大于500， 宽度压缩成500

            // draw source image
            source = document.getElementsByTagName('canvas')[0].getContext('2d');
            document.getElementsByTagName('canvas')[0].width = communityThis.sourceWidth;
            document.getElementsByTagName('canvas')[0].height = sheight * communityThis.scale;
            source.scale(communityThis.scale, communityThis.scale);
            source.drawImage(image, 0, 0);

            // draw cover area
            cover = document.getElementsByTagName('canvas')[1].getContext('2d');
            document.getElementsByTagName('canvas')[1].width = communityThis.sourceWidth;
            document.getElementsByTagName('canvas')[1].height = sheight * communityThis.scale;
            cover.fillStyle = 'rgba(243, 237, 237, 0.6)';
            cover.fillRect(0, 0, communityThis.sourceWidth, sheight * communityThis.scale);  // 绘制遮布
            cover.clearRect(0, 0, communityThis.coverWidth, communityThis.coverWidth);  // 绘制选区框
            cover.strokeStyle = 'rgb(247, 30, 53)';  // 绘制缩放区，正方形（10*10）
            cover.strokeRect(communityThis.coverWidth - 5, communityThis.coverWidth - 5, 10, 10);

            // draw preview image
            target = document.getElementsByTagName('canvas')[2].getContext('2d');
            document.getElementsByTagName('canvas')[2].width = communityThis.coverWidth;
            document.getElementsByTagName('canvas')[2].height = communityThis.coverWidth;
            target.drawImage(image, 0, 0, communityThis.coverWidth / communityThis.scale, communityThis.coverWidth / communityThis.scale,
                0, 0, communityThis.targetWidth, communityThis.targetWidth);

            document.getElementsByTagName('body')[0].onmousemove = function(e) {
                this.onmouseup = function() {
                    draging = false;
                    zoom = false;
                };
            };

            document.getElementsByTagName('canvas')[1].onmousemove = function (e) {
                this.onmousedown = (function (the) {
                    return function (arg) {// 如果鼠标在缩放区
                        if (arg.offsetX >= communityThis.targetX + communityThis.coverWidth - 5
                            && arg.offsetX <= communityThis.targetX + communityThis.coverWidth + 5
                            && arg.offsetY >= communityThis.targetY + communityThis.coverWidth - 5
                            && arg.offsetY <= communityThis.targetY + communityThis.coverWidth + 5) {
                            zoom = true;
                        } else { // 不在缩放区
                            draging = true;
                        }
                    };
                })(e);
                this.onmouseup = function () {
                    draging = false;
                    zoom = false;
                };
                if (zoom) {
                    const newWidth = Math.min(e.offsetX - communityThis.targetX);  
                    const newHeight = Math.min(e.offsetY - communityThis.targetY);
                    if (newWidth > 50 && newHeight > 50) {
                        communityThis.coverWidth = Math.min(newHeight, newWidth);  // 新的选取框宽度
                        // redraw selest area
                        cover.clearRect(0, 0, cover.width, cover.height);
                        document.getElementsByTagName('canvas')[1].width = communityThis.sourceWidth;
                        document.getElementsByTagName('canvas')[1].height = sheight * communityThis.scale;
                        cover.fillStyle = 'rgba(243, 237, 237, 0.6)';
                        cover.fillRect(0, 0, communityThis.sourceWidth, sheight * communityThis.scale);
                        cover.clearRect(communityThis.targetX, communityThis.targetY, communityThis.coverWidth, communityThis.coverWidth);
                        cover.strokeStyle = 'rgb(247, 30, 53)';
                        cover.strokeRect(communityThis.targetX + communityThis.coverWidth - 5,
                            communityThis.targetY + communityThis.coverWidth - 5, 10, 10);

                        // redraw target image
                        target.clearRect(0, 0, target.width, target.height);
                        document.getElementsByTagName('canvas')[2].width = communityThis.targetWidth;
                        document.getElementsByTagName('canvas')[2].height = communityThis.targetWidth;
                        target.drawImage(image, communityThis.targetX / communityThis.scale, communityThis.targetY / communityThis.scale,
                            communityThis.coverWidth / communityThis.scale, communityThis.coverWidth / communityThis.scale,
                            0, 0, communityThis.targetWidth, communityThis.targetWidth);
                    }
                }
                if (draging) {
                    communityThis.targetX = e.offsetX; // target cooridinate X
                    communityThis.targetY = e.offsetY;
                    // 如果鼠标点不能完整绘制选取区，适当移动选区框绘制起点
                    if (e.offsetX + communityThis.coverWidth > communityThis.sourceWidth) {
                        communityThis.targetX = communityThis.sourceWidth - communityThis.coverWidth;
                    }
                    if (e.offsetY + communityThis.coverWidth > sheight * communityThis.scale) {
                        communityThis.targetY = sheight * communityThis.scale - communityThis.coverWidth;
                    }
                    // redraw selest area
                    cover.clearRect(0, 0, cover.width, cover.height);
                    document.getElementsByTagName('canvas')[1].width = communityThis.sourceWidth;
                    document.getElementsByTagName('canvas')[1].height = sheight * communityThis.scale;
                    cover.fillStyle = 'rgba(243, 237, 237, 0.6)';
                    cover.fillRect(0, 0, communityThis.sourceWidth, sheight * communityThis.scale);
                    cover.clearRect(communityThis.targetX, communityThis.targetY, communityThis.coverWidth, communityThis.coverWidth);
                    cover.strokeStyle = 'rgb(247, 30, 53)';
                    cover.strokeRect(communityThis.targetX + communityThis.coverWidth - 5,
                        communityThis.targetY + communityThis.coverWidth - 5, 10, 10);

                    // redraw target image
                    target.clearRect(0, 0, target.width, target.height);
                    document.getElementsByTagName('canvas')[2].width = communityThis.targetWidth;
                    document.getElementsByTagName('canvas')[2].height = communityThis.targetWidth;
                    target.drawImage(image, communityThis.targetX / communityThis.scale, communityThis.targetY / communityThis.scale,
                        communityThis.coverWidth / communityThis.scale, communityThis.coverWidth / communityThis.scale,
                        0, 0, communityThis.targetWidth, communityThis.targetWidth);
                }
            };
        };
    }

效果图：