@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>
  • Вопрос задан
  • 347 просмотров
Решения вопроса 1
zkrvndm
@zkrvndm
Архитектор решений
Я тут вижу две возможные причины причины, почему не работает.

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

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

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