前端怎么根据后端给的坐标在上传显示的图片上画出矩形框出来？

如图，左边是我上传的图片并显示在上面的div里，后端进行识别并在右边识别出文字的坐标，前端根据坐标在左边的图片上把位置框出来（红色框框）识别出的文字结果要显示在红色框框的上面。这个应该如何做？是不是应该获取到图片，然后用canvas画出来？大神给点思路。
图片描述

阅读 11.5k

效果

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="400" height="300"></div>
        <script>
            const img = new Image();
            const canvas = document.querySelector("#canvas");
            let ctx;
            ctx = canvas.getContext("2d");
            // 当图片加载完再动手
            img.onload = function () {
                // 画布大小和图片尺寸不一样算好比例
                const cWidth = canvas.width, cHeight = canvas.height;
                const imgWidth = img.naturalWidth, imgHeight = img.naturalHeight;
                const zoom = {
                    width: cWidth / imgWidth,
                    height: cHeight / imgHeight,
                };
                // 以图画底
                ctx.drawImage(img, 0, 0, cWidth, cHeight);
                // 假设左上角的point 29,24 这是针对原图的坐标系
                // 假设右下角的point 124,52 这是针对原图的坐标系
                const startPoint = [29, 24], endPoint = [124, 52];
                // https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/strokeRect
                ctx.strokeStyle = "blue";
                ctx.strokeRect(
                    startPoint[0] * zoom.width,
                    startPoint[1] * zoom.height,
                    (endPoint[0] - startPoint[0]) * zoom.width,
                    (endPoint[1] - startPoint[1]) * zoom.height
                );
            }

            // 动手
            img.src = "./demo.jpg";
        </script>
</body>

</html>

前端怎么根据后端给的坐标在上传显示的图片上画出矩形框出来？

效果

代码

原图

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？