使用 Vue 和 Bootstrap 在图像上绘制一个框

Question

我正在构建一个应用程序，您可以在其中上传图片，它们被发送到服务器，在该服务器上检测到图像上的对象并返回图像中对象的位置。现在我想用图像中检测到的对象来标记该区域，但我在这里有点挣扎于 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>

还有我的draw方法：

    draw () {
  let c = document.getElementById('c')
  let ctx = c.getContext('2d')
  this.canvas = ctx
  this.canvas.beginPath()
  this.canvas.rect(this.box[0], this.box[1], this.box[2], this.box[3])
  this.canvas.stroke()
}

对此进行测试会导致以下错误：

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

将我指向绘图功能。我在这里做错了什么？谢谢！！

Answer 1

问题在于b-img 呈现了一个img 标记，而您正尝试在该标记上使用canvas 函数。 相反，您可以制作一个位于图像顶部的画布，然后您可以在其上进行绘制，因为画布是透明的，所以它会像在图像上一样显示。

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

new Vue({
  el: '#app',
  methods: {
    draw() {
      let c = this.$refs['myCanvas']
      const canvas = c.getContext('2d')
      canvas.beginPath()
      canvas.rect(20, 20, 150, 100)
      canvas.stroke()
    }
  }
})

.canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  width: 100%;
  height: 100%
}

.canvas-wrapper {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app">
  <b-container>
    <div class="canvas-wrapper">
      <b-img src="https://picsum.photos/600/300/?image=25" fluid-grow></b-img>
      <canvas ref="myCanvas" class="canvas-overlay"></canvas>
    </div>
    <b-btn @click="draw">Draw</b-btn>
  <b-container>
</div>