Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.04.2018, 02:59
Профессор
Отправить личное сообщение для clecar Посмотреть профиль Найти все сообщения от clecar
 
Регистрация: 11.02.2015
Сообщений: 254

Сохранить рисунок из canvas в .jpg
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;

Этот код сохраняет рисунок из canvas в формате jpg но имеет тип
easytoshop, приходится переименовывать. Что то не получается присвоить файлу расширение при сохранении.
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2018, 05:08
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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

var dataURL = canvas.toDataURL("image/jpeg");
var link = document.createElement("a");
link.href = dataURL;
link.download = "my-image-name.jpg";
link.click();
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2018, 15:11
Профессор
Отправить личное сообщение для clecar Посмотреть профиль Найти все сообщения от clecar
 
Регистрация: 11.02.2015
Сообщений: 254

Пришёл к выводу, что это сделать не возможно. Если имеем имя с расширением, то просто откроется в браузере. Так что серию картинок из canvas можно сохранить только типа easytoshop на компьютер. А потом по одной переименовывать с любым расширением. Хорошо получается с jpg, но сам файл в базе64 всё равно png.
Ответить с цитированием
  #4 (permalink)  
Старый 02.04.2018, 15:43
Профессор
Отправить личное сообщение для clecar Посмотреть профиль Найти все сообщения от clecar
 
Регистрация: 11.02.2015
Сообщений: 254

Попробуйте. На ваш компьютер загрузится 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>

Нет это работает только локально отсюда загрузки у меня не пошли
Ответить с цитированием
  #5 (permalink)  
Старый 02.04.2018, 16:05
Профессор
Отправить личное сообщение для clecar Посмотреть профиль Найти все сообщения от clecar
 
Регистрация: 11.02.2015
Сообщений: 254

Один первый при первом открытии сохраняется. Так что можно продолжить эксперименты.
Ответить с цитированием
  #6 (permalink)  
Старый 02.04.2018, 19:50
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вот пример на основе кода, который я приводил выше...
<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>


Вот открывается или что вы имеете в виду?
Изображения:
Тип файла: jpg map.jpg (183.7 Кб, 13 просмотров)

Последний раз редактировалось Malleys, 02.04.2018 в 19:58.
Ответить с цитированием
  #7 (permalink)  
Старый 03.04.2018, 14:18
Профессор
Отправить личное сообщение для clecar Посмотреть профиль Найти все сообщения от clecar
 
Регистрация: 11.02.2015
Сообщений: 254

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

Последний раз редактировалось clecar, 03.04.2018 в 14:24.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сохранить фотку из WebCam на сервере. potkin ExtJS 3 13.10.2016 10:03
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
Сохранить canvas в png andrey1402 Общие вопросы Javascript 10 15.11.2014 22:00
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16