Как получить изображение канваса, который рисует изображение?

Question

[MrChen]

Здравствуйте! Столкнулся с такой проблемой: создаю элемент канваса, затем рисую на нем изображение, но когда получаю ссылку на изображение при помощи toDataUrl и перехожу по ней - изображение, которое отрисовал канвас не отображается.

Вот мой код:

var canvas = document.createElement('canvas')
		var ctx = canvas.getContext('2d')

		canvas.width = 500
		canvas.height = 500

		var backgroundImg = document.createElement("img");

		backgroundImg.src = "https://i.imgur.com/yf6d9SX.jpg";

		backgroundImg.onload = () => {
		    ctx.drawImage(backgroundImg, 0, 0, canvas.width,canvas.height);   
		}

		console.log(canvas.toDataURL("image/jpg"))

Comments

[Konstantin Zhikhor]

по моему ты его не сохранил и по этому не показывается
вот как сохранять

var dataURL = canvas.toDataURL("image/jpeg");
var link = document.createElement("a");
link.href = dataURL;
link.download = "my-image-name.jpg";
link.click();

[profesor08]

А ты уверен, что там что-то нарисовалось? Вот ты добавь его в документ, чтоб отобразился на странице, и вот потом получи дата ссылку.

Answer 1

[dollar]

Вы создаете асинхронный код в onload, который должен запуститься после загрузки изображения. Даже если оно уже загружено и ждёт в кеше, этот кусок кода всё равно запустится сразу после текущего куска кода.

Но перед этим должен закончится текущий кусок кода, в конце которого вы выводите канвас в строку. И естественно, там ничего нет.

После того, как выполнится console.log, на канвасе будет нарисовано изображение (в onload).

P.S. Когда исправите эту ошибку, столкнетесь со следующей. Но это будет уже другой вопрос.