Блог

Главная - Вопросы по программированию - заменить холст в html-элементе

заменить холст в html-элементе

#javascript #html #vue.js

Вопрос:

я создаю таблицу с картинками, нарисованными на холсте. Ivery canva находится в разных div, где каждый div имеет разные идентификаторы.

я получаю div по идентификатору и добавляю туда холст:

     thumbnail(video, canvaId) {
  const canvasThumbnail = document.createElement('canvas')
  const cth = canvasThumbnail.getContext('2d')

  const data = video.slice(8)
  this.imgToHTML(data, e => {
    const drawingThumbnail = new Image()
    drawingThumbnail.src = e.target.result
    drawingThumbnail.onload = function () {
      canvasThumbnail.width = 300
      canvasThumbnail.height = 190
      cth.drawImage(drawingThumbnail, 0, 0)
      document.getElementById(canvaId).appendChild(canvasThumbnail)
    }
  })
},

Проблема, с которой я сталкиваюсь, заключается в том, что иногда я получаю другую картинку для одного и того же «идентификатора», и я должен заменить холст в определенном «идентификаторе».
Я пробовал разные методы (removeChild, replaceWith), но все равно не могу работать.

Можете ли вы помочь мне, как заменить холст в элементе с определенным идентификатором?

Комментарии:

1. Вы используете Vue, или это неверный тег? В общем, вы не должны смешивать Vue с прямыми манипуляциями DOM , например document.createElement() , вместо этого выбирая решения, которые используют саму структуру (по крайней мере, когда это возможно).

2. Покажите шаблон Vue, содержащий эти div s и их идентификаторы. И покажи, как thumbnail() это называется.

Метки: