Как вставлять изображение на canvas НЕ только при загрузке?

Question

[Эрик Микоян]

У меня есть canvas, и мне нужно там несколько раз использовать одно и то же изображение. Я могу как-то записать его в переменную, и потом просто передавать в ctx.drawImage? Как это сделать без img.onload?

const image = new Image();
image.src = src;
image.onload = () => {
texture = image;
};

Как мне из условного кода выше использовать texture?

Answer 1

[dollar]

С помощью data:URL (RFC 2397).

Пример

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0j
vb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAA
Re8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0Cc
guWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" 
height="14">

К слову, загрузка всё равно будет. Просто вы переносите картинку из отдельного файла в саму страницу, увеличивая время её загрузки. Иногда это оправданно. Но если картинки большие, то вы просто лишаете себя возможности показать какой-нибудь preloader, чтобы пользователь не скучал в ожидании.

Соответственно, ваш код нужно поменять примерно так:

Код

const image = new Image();
image.src = strDataURI; // картинка уже в строке
texture = image;