Javascript [AngularJS] 函数将画布保存为具有自定义名称的图像答案

【问题标题】：Javascript [AngularJS] function to save canvas as image with custom nameJavascript [AngularJS] 函数将画布保存为具有自定义名称的图像
【发布时间】：2017-05-11 14:57:36
【问题描述】：

我正在寻找一个可以在单击保存按钮时将画布保存为具有自定义名称的图像的功能。现在，我的 javascript 函数中有以下几行，它们采用 canvas 元素并指定数据的格式：

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

我不知道如何为图像提供自定义名称以及如何下载。

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： javascript angularjs html canvas

【解决方案1】：

这就是我在重新发布的项目中的做法

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);
    });
};

【讨论】：

【解决方案2】：

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

输入这段代码，你就完成了。

【讨论】：

为什么这个答案是-1。如果有人有任何疑问，请添加评论。