Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2018, 10:52
Новичок на форуме
Отправить личное сообщение для leonid2018 Посмотреть профиль Найти все сообщения от leonid2018
 
Регистрация: 11.04.2018
Сообщений: 2

Сохранить картинку на диск полученную html2canvas
Здравствуйте!

По клику на кнопку конвертируем содержимое div в png. Все работает. Теперь нужно по клику на другую кнопку сохранить полученную картинку в файл на компьютере.
Как узнать адрес(имя) полученной картинки? Лучше даже сразу ее обозвать image.png и сохранить на диск клиента.

$(document).ready(function() {
    $('.textS').click(function(){
	    html2canvas($("#capture7"), {
	    		allowTaint: true,
	        onrendered: function(canvas) {
					$('.paste').prepend(canvas);
            var dataURL = canvas.toDataURL();
        		console.log(dataURL);
	        }
      });
    });
	});


Заранее благодарен, js изучаю совсем недавно.
Ответить с цитированием
  #2 (permalink)  
Старый 11.04.2018, 11:48
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

Сохранить рисунок из canvas в .jpg
https://jsfiddle.net/codepo8/V6ufG/2/
https://www.google.ru/search?q=js+save+canvas+as+image
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2018, 17:47
Новичок на форуме
Отправить личное сообщение для leonid2018 Посмотреть профиль Найти все сообщения от leonid2018
 
Регистрация: 11.04.2018
Сообщений: 2

$(document).ready(function() {
    $('.textS').click(function(){
	    html2canvas($("#capture7"), {
	    		allowTaint: true,
	        onrendered: function(canvas) {
					$('div.box.paste').prepend(canvas);
             var dataURL = canvas.toDataURL("image/jpeg");
        		console.log(dataURL);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;
var link = document.getElementById('link');
link.setAttribute('download', 'mybestimage.png');
link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
link.click();
	        }
      });
    });
	});


Вот что в итоге получилось. Работает только после загрузки на хостинг (пишу, т.к. пока сам понял много времени потерял).
В коде html добавить <a id="link"></a>

Большое спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сохранить картинку на комп надав кнопку ilyas-> Элементы интерфейса 1 13.12.2013 10:05