@erik_mikoyan
Пишу на питоне, учу джес

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

У меня есть canvas, и мне нужно там несколько раз использовать одно и то же изображение. Я могу как-то записать его в переменную, и потом просто передавать в ctx.drawImage? Как это сделать без img.onload?
const image = new Image();
image.src = src;
image.onload = () => {
texture = image;
};

Как мне из условного кода выше использовать texture?
  • Вопрос задан
  • 45 просмотров
Решения вопроса 1
dollar
@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;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы