https://www.cnblogs.com/szqtiger/p/12100754.html

vue如何显示base64图片_vue显示base64_不断学习的码农的博客-CSDN博客

图片上进行红框框选_时小帅的博客-CSDN博客

设置canvas画布大小_canvas设置画布大小_最凶残的小海豹的博客-CSDN博客

图片回显

结合以上，下面我贴一下项目图 要求大致是在图片是进行红框标记后端返回过来的位置，ai识别的数据

1.回显图片

2.图片展示后 canvas画布大小设置与图片大小一致，并且重合

3.canvas再在上面画红框 ，红框位置由后端返回数据 如下数据：

 代码：

<!-- 上传图片按钮 -->
 <input
                                id="userAvatar"
                                ref="uploadFile"
                                class="addPicInput"
                                type="file"
                                accept="image/*"
                                @change="fileChange($event)"
                              />
<!-- 图片展示在左侧 -->
                        <div
                          id="previewImageUrl"
                          style="object-fit: cover;position: relative;"
                        >
                          <img
                            id="prewDrawImg"
                            :src="previewImageUrl"
                            alt=""
                            style="max-width:100%;"
                          />
                          <canvas
                            id="drawcanvas"
                            style="position: absolute;z-index:99;left:0"
                          ></canvas>
                        </div>


data(){
    return {
        previewImageUrl: '',
    }
}

methods:{
    //上传图片
    fileChange(event) {
      var that = this
      var files = document.getElementById('userAvatar').files[0]
      var reader = new FileReader()
      reader.onloadend = function() {
        that.userPhoto = reader.result
        console.log(reader.result)
        that.previewImageUrl = reader.result
      }
      if (files) {
        reader.readAsDataURL(files)
      }
    },
    //画布画图并红框标记位置
    //需要自定义一些参数 画图
    draw(coordinate) {//接收后端坐标数据，接收参数自行定义，也可以把画布id也作为参数传过来
      //坐标数据
      var canvas = document.getElementById('drawcanvas') //写死了画布id
      var prewDrawImg = document.getElementById('prewDrawImg') //获取回显的图片
      console.log(prewDrawImg.offsetWidth, 'prewDrawImg')
      console.log(prewDrawImg.offsetHeight, 'prewDrawImg')
      var context = canvas.getContext('2d') //getContext() 方法可返回一个对象
      canvas.width = prewDrawImg.offsetWidth // 注意：没有单位 设置画布大小与回显图片一致
      canvas.height = prewDrawImg.offsetHeight // 注意：没有单位
      context.strokeStyle = 'red' //图形边框的填充颜色
      context.lineWidth = 2 //用宽度为 5 像素的线条来绘制矩形：
      context.strokeRect(24, 35, 50, 50) //绘制矩形（无填充）参数分别代表下x,y，长，宽 
      //context.strokeRect(54, 15, 50, 50) //需要标注几次就画几个
    },
}