Надо загрузить canvas со страницы на компьютер пользователя

192

25 марта 2018, 20:04

Добрый день! Хочу дать возможность пользователю, сохранить у себя на компьютере скриншот, динамически сформированного элемента страницы. Со скриншотом проблем нет. А вот дальше знаний не хватает. Можете помочь?

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 
var btn = document.getElementById("btn"); 
btn.addEventListener("click", canvasDownload); 
 
function canvasDownload(){ 
var canvasImg = canvas.toDataURL("image/jpeg"); 
} 
 
function createRect(){ 
context.beginPath(); 
context.fillStyle="blue"; 
context.fillRect(10, 8, 50, 67); 
context.closePath(); 
} 
 
createRect();

#canvas{ 
border: 1px solid; 
}

<canvas id="canvas"></canvas> 
<button id="btn" type="button">Скачать canvas</button>

Обещаю изучить методы загрузки, после того, как увижу, как это реализуется)

Answer 1

Для универсальности лучше так. С хромом и файрфокс просто сохраняют, другие вроде как в отдельной вкладке открывают. Лучше варианта нет. (Конечно если вы не хотите отдавать картинку через сервер.)

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 
var btn = document.getElementById("btn-download"); 
 
btn.addEventListener("click", function (e) { 
    var dataURL = canvas.toDataURL('image/png'); 
    btn.href = dataURL; 
}); 
 
function createRect(){ 
context.beginPath(); 
context.fillStyle="blue"; 
context.fillRect(10, 8, 50, 67); 
context.closePath(); 
} 
 
createRect();

#canvas{ 
border: 1px solid; 
}

<canvas id="canvas"></canvas> 
<a href="#" class="button" id="btn-download" download="my-file-name.png">Download</a>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

ES2015 и строки с обратными кавычками

Переписываю свой Javascript код под ES2015 (браузеры, на которые запускается сайт это гарантированно поддерживают)

167

HTML

Обновление страницы без перехода на нее?

Уважаемые члены сообщества, прошу помочь в понимании следующего, имею родительскую страницу indexjsp, с нее по ссылке ухожу на другую страницу...

190

HTML

При нажатии на radiobutton html показать значение value

Например такой кодНажал на какой-нибудь radio и вывелось value через alert

266

HTML

Нужно узнать название плагина

Как называется плагин в котором при нажатии на вкладку изображения начинают плавно меняться местами(пример на изображении)?

255