前端给图片添加算法识别框（canvas绘制图片添加矩形框）

岳麓庄绘画人

已于 2022-09-29 14:02:12 修改

阅读量1.3k

点赞数 2

文章标签：前端

于 2022-09-29 14:01:18 首次发布

本文链接：https://blog.csdn.net/m0_58434713/article/details/127105399

版权

功能描述：要求根据后台返回的图片坐标，在图片上绘制矩形框并显示绘制后的图片

思路：

创建canvas标签
设置canvas2D画布
创建img，动态设置src，设置img属性crossOrigin = "anonymous";//解决跨域图片问题加载成功后拿到图片的width,height
使用 cxt.drawImage(img, 0, 0, img.width, img.height)绘制背景图
cxt.lineWidth = 2;cxt.strokeStyle = '#FF0000；cxt.strokeRect(800, 400, 200, 300)（设置绘制线条大小、颜色、位置）
canvas.toDataURL('image/png') 拿到绘制后的图片base64，图片可以直接加载base64

以下为代码示例：

 let canvas = document.createElement('canvas')

 var cxt = canvas.getContext("2d");

 const img = new Image()

 img.crossOrigin = "anonymous";//解决跨域图片问题，就是上面提及的

 img.src = '动态设置图片链接'

 img.onload = () => {
      canvas.width = img.width
      canvas.height = img.height
      cxt.drawImage(img, 0, 0, img.width, img.height)
      cxt.lineWidth = 2;
      cxt.strokeStyle = '#FF0000'
      cxt.strokeRect(800, 400, 200, 300)
      let src = canvas.toDataURL('image/png')  // 拿到图片的base64数据
    }

使用vue或者需要绘制多个矩形框时自己封装个方法，套路是一样的；记录一下~