Question

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

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

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

任何帮助将不胜感激。

由于

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

Answer 2

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

输入此代码即可完成。

Javascript [AngularJS]函数将画布保存为具有自定义名称

2 个答案: