js通过图片坐标信息进行切图处理，并返回切图结果

 根据left, top, width, height在原图基础上进行切图处理，handleImgData为要处理的源图片（推荐base64格式），cutImageShowDomID为img标签的id（最终返回切图展示的地方）

 

cutImage(handleImgData, left, top, width, height, cutImageShowDomID) {
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open("get", handleImgData, true);
        xhr.responseType = "blob";
        xhr.onload = function () {
            if (this.status == 200) {
                let blob = this.response;
                let oFileReader = new FileReader();
                oFileReader.onloadend = function (e) {
                    let base64ImgData = e.target.result;
                    let img = new Image()
                    img.src = base64ImgData
                    let canvas = document.createElement('canvas');
                    let ctx = canvas.getContext('2d');
                    const clipPos = [[left, top], [(left + width), top], [left, (top + height)], [(left + width), (top + height)]]
                    img.onload = function () {
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.beginPath();
                        ctx.moveTo(clipPos[0][0], clipPos[0][1]);
                        ctx.lineTo(clipPos[1][0], clipPos[1][1]);
                        ctx.lineTo(clipPos[3][0], clipPos[3][1]);
                        ctx.lineTo(clipPos[2][0], clipPos[2][1]);
                        ctx.clip();
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        let minLeft = clipPos[0][0], maxLeft = clipPos[0][0], minTop = clipPos[0][1], maxTop = clipPos[0][1]
                        for (let index = 1; index < clipPos.length; index++) {
                            const item = clipPos[index];
                            if (item[0] < minLeft) {
                                minLeft = item[0]
                            }
                            if (item[0] > maxLeft) {
                                maxLeft = item[0]
                            }
                            if (item[1] < minTop) {
                                minTop = item[1]
                            }
                            if (item[1] > maxTop) {
                                maxTop = item[1]
                            }
                        }
                        const imgClipData = ctx.getImageData(minLeft, minTop, maxLeft - minLeft, maxTop - minTop);
                        const canvas2 = document.createElement('canvas');
                        const ctx2 = canvas2.getContext("2d")
                        canvas2.width = imgClipData.width
                        canvas2.height = imgClipData.height
                        ctx2.putImageData(imgClipData, 0, 0, 0, 0, imgClipData.width, imgClipData.height)
                        document.getElementById(cutImageShowDomID).src = canvas2.toDataURL("image/jpg");
                    }
                };
                oFileReader.readAsDataURL(blob);
            }
        }
        xhr.send();
    },