canvas通过坐标在图片上框出

1、页面

 <el-dialog
    title="查看缺陷"
    v-model="defectVisible"
    :visible.sync="defectVisible"
    :close-on-click-modal="false"
    width="58%"
>
    <div style="width: 600px; margin: 0 auto">
        <canvas id="canvas" />
    </div>
</el-dialog>
//查看缺陷
defectLook(index, row) {
    console.log(row);
    this.defectVisible = true;
    this.defectSrc = row.imgUrl;
    //请求接口
    getDefect({ shootId: row.shootId }).then((res) => {
        var drewParams = JSON.parse(res.data[0].drewParams);
        const img = new Image();
        const canvas = document.querySelector('#canvas');
        (canvas.width = row.imgWidth), (canvas.height = row.imgHeight);
        let ctx;
        ctx = canvas.getContext('2d');
        // 当图片加载完再动手
        img.onload = function () {
            // 画布大小和图片尺寸不一样算好比例
            const cWidth = canvas.width,
                cHeight = canvas.height;
            const imgWidth = img.naturalWidth,
                imgHeight = img.naturalHeight;
            console.log(cWidth, cHeight);
            console.log(imgWidth, imgHeight);
            const zoom = {
                width: cWidth / imgWidth,
                height: cHeight / imgHeight
            };
            // 以图画底
            ctx.drawImage(img, 0, 0, cWidth, cHeight);
            // 假设左上角的point 29,24 这是针对原图的坐标系
            // 假设右下角的point 124,52 这是针对原图的坐标系
            const startPoint = [drewParams.x1, drewParams.y1],
                endPoint = [drewParams.x2, drewParams.y2];
            ctx.strokeStyle = 'red';
            ctx.strokeRect(
                startPoint[0] * zoom.width,
                startPoint[1] * zoom.height,
                (endPoint[0] - startPoint[0]) * zoom.width,
                (endPoint[1] - startPoint[1]) * zoom.height
            );
        };

        // 动手
        img.src = row.imgUrl;
    });
},