Рисование прямоугольника на изображении с Vue и Bootstrap - PullRequest
Новая
       57

Рисование прямоугольника на изображении с Vue и Bootstrap

0 голосов
/ 04 марта 2020

Я создаю приложение, в которое вы можете загружать изображения, они отправляются на сервер, где объект обнаружен на изображении, а положение объекта на изображении возвращается. Теперь я хочу отметить область обнаруженным объектом на изображении, но я немного борюсь с 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 () {
  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

указывает мне на функцию рисования. что я тут не так делаю? спасибо !!

1 Ответ

0 голосов
/ 04 марта 2020

Проблема в том, что 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>
...