@genezis1111

Как сохранить canvas в jpg с учетом использования drawImage?

Если использовать код как есть - сохраняет пустую область. Если перед сохранением нарисовать например линию - сохранится пустая область с линией, без картинки. В браузере выглядит как надо.
P.S
Пробовал на хостинге с ссылкой на img url (с того же хостинга-домена) результат тот же.
function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

var img = new Image();
	img.onload = function() {
		ctx.drawImage(img, 0, 114, 600, 486);
		};
	img.src = "file:///C:/Users/1/Desktop/1.jpg";
			
	
  var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.jpg');
  link.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream"));
    }

<body onload="draw();">
	<canvas id="myCanvas" width="600" height="600"></canvas>
	<a id="link">SAVE</a>
</body>
  • Вопрос задан
  • 351 просмотр
Решения вопроса 1
zkrvndm
@zkrvndm
Архитектор решений
Я тут вижу две возможные причины причины, почему не работает.

1. У текущего документа и картинки разный источник, т. е. не совпадает протокол/адрес/порт
2. Картинка не успевает загрузится, нужно немного выждать, чтобы не получать пустоту
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
29 нояб. 2024, в 09:43
100000 руб./за проект
29 нояб. 2024, в 07:44
20000 руб./за проект