Javascript-форум - Сохранить рисунок из canvas в .jpg

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Сохранить рисунок из canvas в .jpg (https://javascript.ru/forum/misc/73252-sokhranit-risunok-iz-canvas-v-jpg.html)

Сохранить рисунок из canvas в .jpg

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;

Этот код сохраняет рисунок из canvas в формате jpg но имеет тип
easytoshop, приходится переименовывать. Что то не получается присвоить файлу расширение при сохранении.

Используйте атрибут download, чтобы указать имя сохраняемого файла

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

Пришёл к выводу, что это сделать не возможно. Если имеем имя с расширением, то просто откроется в браузере. Так что серию картинок из canvas можно сохранить только типа easytoshop на компьютер. А потом по одной переименовывать с любым расширением. Хорошо получается с jpg, но сам файл в базе64 всё равно png.

Попробуйте. На ваш компьютер загрузится 10 картинок, килобайт по 10. Проверял в браузерах на базе хром.

<html>
<head>
</head>
<body id='экран' style=' width:100%; height:100%;' onload='var и=document.all; и.v.style.top=((и.экран.clientHeight/2)-200)+"px"; и.v.style.left=((и.экран.clientWidth/2)-200)+"px"; var a=0;
setInterval(function() { a+=0.01;
if (a>0.1){return false;}
 и.v.width= и.v.width;
 ctx=и.v.getContext("2d");
ctx.translate(200, 200);
   ctx.rotate(a);
	 ctx.fillStyle = "rgb(255,0,0)";
	 ctx.fillRect(-50, -50, 100, 100); 
	 ctx.rotate(-a*3);
	 ctx.fillStyle = "rgb(0,255,0)";
	  ctx.fillRect(-25, -25, 50, 50); 
	  ctx.translate(100, 100);
	  ctx.rotate(a*4);
	  ctx.fillStyle = "rgb(0,0,255)";
	  ctx.fillRect(-10, -10, 40, 40);
		var image = и.v.toDataURL("image/png").replace("image/png", "image/octet-stream");
		window.location.href=image;

}, 200);'>
	 <canvas id="v"  width='400px' height='400px' style=' position:absolute;' ></canvas>
</body>
</html>

Нет это работает только локально отсюда загрузки у меня не пошли

Один первый при первом открытии сохраняется. Так что можно продолжить эксперименты.

Вот пример на основе кода, который я приводил выше...

<canvas id="canvas" width="150" height="150"></canvas>
<script>
var ctx = canvas.getContext("2d");
ctx.font = "120px Arial";
ctx.fillText("\uD83D\uDDFA", 15, 115);

canvas.onclick = function() {
  var dataURL = canvas.toDataURL("image/jpeg");
  var link = document.createElement("a");
  document.body.appendChild(link); // Firefox requires the link to be in the body :(
  link.href = dataURL;
  link.download = "my-image-name.jpg";
  link.click();
  document.body.removeChild(link);
};
</script>

Вот открывается или что вы имеете в виду?

Да именно это и имел, Большое Спасибо! Просто зациклился на получении серии картинок и были ошибки.