Как скачать canvas картинку?

Question

[Ninja Mate]

Конвертирую SVG в PNG, потом нужно сделать кнопку скачать, но не мойму как это сделать.
Картинка конвертируется (проверяю добавлением на страницу)

// Добавил функцию к кнопке
        var buttonConvert = document.getElementById("convertBtn");

// Нахожу svg и в Canvas засовываю 
        buttonConvert.onclick = function svgToCanvas(){
            // Select the first svg element
            var svg = d3.select("svg")[0][0],
                img = new Image(),
                serializer = new XMLSerializer(),
                svgStr = serializer.serializeToString(svg);

            img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);

//Делаю для себя проверку что все работает, вижу что элемент добавился
            var canvas = document.createElement("canvas");
            document.body.appendChild(canvas);

            //saveAs(canvas, "chart.png");

            canvas.width = width;
            canvas.height = height;
            canvas.getContext("2d").drawImage(img,0,0,width,height);

 // Вот тут заминка, на работает функция, а нужно еще и для всех браузеров
// включая EI10+
            canvas.download = ("chart.png");

Помогите разобраться чего мне не хватает?

Answer 1

[xmoonlight]

Я использовал вот эту библиотеку.
https://github.com/eligrey/FileSaver.js/

Вот пример, где работает из (FF, Chrome, IE10+ ): https://eligrey.com/demos/FileSaver.js/

Comments

[Ninja Mate]

Подскажите с синтаксисом, после установки глобальная saveAs появляется или нужно импорт делать?

[xmoonlight]

Ninja Mate:
После подключения вот так - работает:

canvas.toBlob(function(blob){
        saveAs(blob, "Изображение.png","image/png");
   });

[Ninja Mate]

xmoonlight: мне нужно собрать приложение через webpack
установил через npm
как обратиться к команде saveAs & toBlob не пойму

import FileSaver from 'FileSaver';
...
canvas.toBlob(function(blob) {
                 //FileSaver.saveAs(blob, "chart.png","image/png");
                 saveAs(blob, "chart.png","image/png");
            });

[xmoonlight]

Ninja Mate: я на веб-странице использовал, даже и не знаю как там.
попробуйте перед canvas.toBlob добавить (строкой выше, до него): var dt = canvas.toDataURL("image/png");

[Ninja Mate]

xmoonlight: На хроме запустил, а вот с EI не работает даже метод canvas.msToBlob поставил. Как вы решили для EI?

[xmoonlight]

Ninja Mate: IE10 - минимум. на какой тестили?

[Ninja Mate]

xmoonlight: Edge

if (canvas.msToBlob) { //for IE
                console.log('EI'); 
                canvas.msToBlob(function(blob) {
//Дальше просто не работает. нет ошибок
                    saveAs(blob);
                    //saveAs(blob, "chart.png","image/png");
                });
            } else {
                //other browsers
                canvas.toBlob(function(blob) {
                    saveAs(blob, "chart.png","image/png");
                });
            }

[xmoonlight]

Ninja Mate: у меня одна функция для всего! не надо делить!

[Ninja Mate]

xmoonlight: тогда странно что работает у вас) toBlob в EI не работает(сразу выдает ошибку), msToBlob там этот метод срабатывает только

[xmoonlight]

Ninja Mate: вот это еще есть в тегах в заголовке head:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

может оно как-то влияет?

[xmoonlight]

Ninja Mate: могу файл скинуть FileSaver.js... может он разный (я давно его вставлял)?

[Ninja Mate]

xmoonlight: не думаю.

Note: The standard HTML5 canvas.toBlob() method is not available in all browsers. canvas-toBlob.js is a cross-browser canvas.toBlob() that polyfills this.

вы скриптом пользуетесь, а я через функцию js пытаюсь. наверно в этом все дело. копаю дальше...

[xmoonlight]

Ninja Mate: каким скриптом?!

[Ninja Mate]

xmoonlight:

<script async="" src="https://cdn.rawgit.com/eligrey/Blob.js/0cef2746414269b16834878a8abc52eb9d53e6bd/Blob.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"/>

[xmoonlight]

Ninja Mate: я только FileSaver использую. А Вы - хотите без него, правильно я понял? См. тут, там есть всякие про blob-функции, включая fake )) даже:
purl.eligrey.com/github/FileSaver.js/blob/master/F...

[Ninja Mate]

xmoonlight: FileSaver я уже запустил на хроме все работает отлично, задача повторить для IE. Object doesn't support property or method 'drawImage' здесь ошибку IE выдает. копаю дальше

[xmoonlight]

Ninja Mate: а-а... так нельзя да... надо юзать: ctx.putImageData(ctx.getImageData,....) я столкнулся с этим....

[Ninja Mate]

xmoonlight: а можно кусок кода у меня так

canvas.getContext("2d").drawImage(img,0,0,width,height);

[xmoonlight]

Ninja Mate:

function generateFunc(download) {
        if (download!==false)  download=true;

       /*...... готовим картинку в "canvas"-переменной.............  */

	var canvas2 = document.createElement('canvas');
	ctx = canvas2.getContext('2d');

try {
        ctx.putImageData(canvas.context.getImageData(0,0,w,h),0,0);
}catch(e){alert('Error!');}
	var dt = canvas2.toDataURL("image/png");

        if (download)
           canvas2.toBlob(function(blob){
	 	saveAs(blob, "Изображение.png","image/png");
           });
 return dt;
}
function download(){ //вешаем на клик объекта DOM
  var img=generateFunc(false); //вызывается всегда
 if (img) {
   $.ajax({
	method: "POST",
	url: "ajax.php",
        dataType: 'json',
	data: JSON.stringify({'basket':basket_arr,'img':img}),
})
	.done(function( msg ) {
	   //for real-server-side: заглушка!
	        console.log(msg);
		alert('Запущено с сервера! См. консоль!');
	})
	.error(function(){
                //alert("Data: "+JSON.stringify({'basket':basket_arr,'img':img}));
        })
	.always(function(){
		if (confirm("Хотите скачать изображение?"))
			generateFunc();
	});
  } //if (img)
}

[Ninja Mate]

xmoonlight: так я и не решил вопрос с IE

// Create the export function - this will just export 
// the first svg element it finds
// Select the first svg element
var svg = d3.select("svg")[0][0],
    img = new Image(),
    serializer = new XMLSerializer(),
    svgStr = serializer.serializeToString(svg);
img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
var canvas = document.createElement("canvas");
//document.body.appendChild(canvas);
canvas.width = width;
canvas.height = height;

            if (canvas.msToBlob) { //for IE
                console.log('EI');

                canvas.getContext("2d");
                
                canvas.msToBlob(function(blob) {
                    saveAs(blob, "chart.png","image/png");
                });
            } else {
                //other browsers
                canvas.getContext("2d").drawImage(img,0,0,width,height);
                
                canvas.toBlob(function(blob) {
                    saveAs(blob, "chart.png","image/png");
                });
            }

[xmoonlight]

Ninja Mate: ну так Вы ничего и не добавили....
надо же ctx.putImageData(canvas.context.getImageData минимум...

[Ninja Mate]

xmoonlight: сори копипастил в торопях

Unable to get property 'getImageData' of undefined or null reference

if (canvas.msToBlob) { //for IE
                console.log('EI');

                var ctx = canvas.getContext("2d");

                ctx.putImageData(canvas.context.getImageData(0,0,width,height),0,0);

                canvas.msToBlob(function(blob) {
                    saveAs(blob, "chart.png","image/png");
                });
            } else {...

Я не понимаю записываем ли мы в конвас или в ctx, но пробовал оба варианта

Unable to get property 'getImageData' of undefined or null reference

if (canvas.msToBlob) { //for IE
                console.log('EI');

                var ctx = canvas.getContext("2d");

                ctx.putImageData(canvas.context.getImageData(0,0,width,height),0,0);

                canvas.msToBlob(function(blob) {
                    saveAs(blob, "chart.png","image/png");
                });
            } else {...

И без context пробовал (кстати что это такое? в похожих примерах не увидел)

Object doesn't support property or method 'getImageData'

if (canvas.msToBlob) { //for IE
                console.log('EI');

                var ctx = canvas.getContext("2d");

                ctx.putImageData(canvas.context.getImageData(0,0,width,height),0,0);

                canvas.msToBlob(function(blob) {
                    saveAs(blob, "chart.png","image/png");
                });
            } else {...

[xmoonlight]

Ninja Mate: "canvas.context." заменить на "context." , а его - получить заранее из canvasa. Это просто из другой библиотеки у меня... также как и для ctx. (ctx - тоже контекст, ну это пиксельный холст)
Т.е. задача - создать новый канвас и скопировать из предыдущего туда.
А новый - уже сохранять.

[Ninja Mate]

xmoonlight: вы так имеете ввиду?

var ctx = canvas.getContext("2d");
                var context = canvas.getContext("2d");

                ctx.putImageData(context.getImageData(0,0,width,height),0,0);

                canvas.msToBlob(function(blob) {
                    saveAs(blob, "chart.png","image/png");
                });

не работает...