Javascript 使用Vue和引导在图像上绘制长方体

我正在建立一个应用程序，你可以上传图片，它们被发送到一个服务器，在那里，一个物体在图像上被检测到，物体在图像中的位置被返回。现在我想在图像中用检测到的对象标记该区域，但我在这里使用Javascript和Vue进行了一些尝试

以下是我的vue组件中的代码：

<b-card title="Result" class="box">
        <span v-if="upload_success">
          <b-img v-bind:src="'http://localhost:5000/' + image_url" fluid-grow alt="Fluid-grow image" id="c"></b-img>
          <p>Category: {{ product_category }}</p>
        </span>
      </b-card>

测试此选项会导致以下错误：

Uncaught (in promise) TypeError: c.getContext is not a function

---

指向绘图函数。我做错了什么？谢谢

问题是

b-img

呈现了一个

img

标记，您正试图在其上使用

canvas

函数。 你可以把画布放在图像的上面，然后在上面画画，因为画布是透明的，所以它会像在图像上一样显示出来

我不太确定它将如何工作，因为图像是流动的，并且会尝试适应它的容器并动态地改变宽度，因此画布绘图可能未对齐

newvue({
el:“#应用程序”，
方法：{
画（）{
设c=this.$refs['myCanvas']
const canvas=c.getContext（'2d'）
canvas.beginPath（）
canvas.rect（20、20、150、100）
canvas.stroke（）
}
}
})

.canvas覆盖{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
指针事件：无；
宽度：100%；
身高：100%
}
.帆布包装{
位置：相对位置；
}

画

@Stanleyyyyy很高兴这对你有用！您应该将答案设置为已接受：）

Uncaught (in promise) TypeError: c.getContext is not a function