Javascript [AngularJS] function to save canvas as image with custom name

Question

I'm looking for a function which can save canvas as an image with custom name when save button is clicked. For now I have the following lines in my javascript function which take the canvas element and specify the format of the data:

var canvas1 = document.getElementById("canvasSignature");                       
var myImage = canvas1.toDataURL("image/png");

I don't know how to give a custom name of the image and how to make it download.

Any help will be appreciated.

Thanks

http://stackoverflow.com/questions/3916191/download-data-url-file ? — Alexis, Dec 27 '16 at 10:22
Take a look at [this js fiddle](https://jsfiddle.net/AbdiasSoftware/7PRNN/) — Jax, Dec 27 '16 at 10:22

score 0 · Answer 1 · answered Feb 28 '17 at 04:33

This is how I did it on a resent project

var dataURIToBlob = function(dataURI, callback) {
    var binStr = atob(dataURI.split(',')[1]), 
    len = binStr.length,
    arr = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        arr[i] = binStr.charCodeAt(i);
    }
    callback(new Blob([arr], {
        type: 'image/png'
    }));
};
var fileName = 'filename.png';
var base64 = canvas.toDataURL('png');
dataURIToBlob(base64, function(blob){
    args.download = fileName;
    args.href = URL.createObjectURL(blob);
    });
};

score -1 · Answer 2 · answered Dec 27 '16 at 10:27

-1

html2canvas($("#container"), {
                onrendered: function (canvas) {
                    var a = document.createElement("a");
                    a.download = "Dashboard.png";
                    a.href = canvas.toDataURL("image/png");
                    a.click();
                  }
            });

put this code and you are done.

answered Dec 27 '16 at 10:27

Dixit

1,359
3
18
39

why this answer got -1. if anyone have any doubt then please add comment. – Dixit Dec 27 '16 at 10:32

Javascript [AngularJS] function to save canvas as image with custom name

2 Answers2