Проблемы с использованием HTML Canvas с Vue. js - PullRequest
Новая
       36

Проблемы с использованием HTML Canvas с Vue. js

2 голосов
/ 05 мая 2020

Я пытаюсь загрузить изображение, используя HTML холст. Причина, по которой я использую холст, заключается в том, что в зависимости от данных, которые я получаю от api, я буду накладывать поверх него другие маленькие изображения, и это, кажется, легче сделать на холсте.

Я пытаясь создать новое изображение html, подобное этому: 

    const imgObj = new Image()
    imgObj.src = '../../pic'
    ctx.drawImage(imgObj, 200, 200)

Когда я пытаюсь использовать этот код в vue. js (как часть функции javscript, вызываемой во время части "onCreate" жизненного цикла), мне сказали, что Image() не определено.

Поэтому вместо этого я попробовал это: 

    const imgObj = document.createElement('img')
    imgObj.src = '../../pic'
    ctx.drawImage(imgObj, 20, 20)

Насколько я понимаю, это должно сделать это то же самое, но ничего не отображается, когда я это делаю.

Если я просто вставлю <img> в html, картинка загрузится, просто отлично, но, как я уже сказал выше, я буду перекрывать кучу фотографий меньшего размера наверху, и работа с кучей изображений кажется намного проще с холстом.

Любой совет приветствуется.

1 Ответ

0 голосов
/ 05 мая 2020

Во втором случае вам нужно вызвать drawImage внутри onload функцию: 

const imgObj= document.createElement('img')
imgObj.src = '../../pic'

imgObj.onload = function () {
   ctx.drawImage(imgObj, 20, 20)
}
...