vue+canvas 给图片上面添加一个红框，然后返回一张新的图片

陪你去流浪_

已于 2023-05-20 22:31:09 修改

阅读量1k

点赞数 1

分类专栏：我的前端生涯文章标签： vue.js javascript 前端

于 2023-05-20 22:27:54 首次发布

本文链接：https://blog.csdn.net/Jokerxiuka/article/details/130786715

版权

我的前端生涯专栏收录该内容

13 篇文章 1 订阅

订阅专栏

给图片上面添加一个红框，然后返回一张新的图片

全局js方法，返回base64
url：图片路径
rect：四个点 {“bottomX”:779,“bottomY”:555,“topX”:731,“topY”:491

export function buildRect(url,rect) {
  return new Promise((resolve) => {
    let img = new Image()
    img.src = url
    img.onload = () => {
      let rects = JSON.parse(rect)
      let imgWidth = img.width
      let imgHeight = img.height
      if (!rects.length) {
        rects = [rects]
      }
      var canvas = document.createElement('canvas');
      canvas.height = imgHeight
      canvas.width = imgWidth
      var ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, imgWidth, imgHeight, 0, 0, imgWidth, imgHeight)
      rects.forEach(rect => {
        ctx.beginPath();
        ctx.moveTo(rect.topX, rect.topY);
        ctx.lineTo(rect.bottomX, rect.topY);
        ctx.lineTo(rect.bottomX, rect.bottomY);
        ctx.lineTo(rect.topX, rect.bottomY);
        ctx.lineTo(rect.topX, rect.topY);
        ctx.strokeStyle = "#ff0000"
        ctx.lineWidth = '4'
        ctx.stroke();
      })
      var detailImg = canvas.toDataURL('image/png')
      resolve(detailImg)
    }
  })
}

组件中使用

this.$buildRect(url, alarmsRect).then(res => {
	//给对象添加新属性存放图片 返回的res就是新的图片（base64格式）
	this.$set(this.alarmsData, "alarmBackgroundPictureBase64", res);
});