1

我正在尝试从画布数据中提取图像信息并将其显示在 .png 文件中。到目前为止，我已经能够使用 toDataURL() 方法从画布中提取 Base64 信息并创建一个 blob 对象（正确识别为 .png 图像），但图像始终为空白。有什么建议么？这是代码

        var canvasData = markup.find('canvas');
        var imageDataURL = canvasData[4].toDataURL("image/png");
        var theData = atob(imageDataURL.substring('data:image/png;base64,'.length)), asArray = new Uint8Array(theData.length);
        for (var i = 0, len = theData.length; i < len; ++i) {
            asArray[i] = theData.charCodeAt(i);
        }
        var blob = new Blob([asArray.buffer], { type: 'image/png' }); saveAs(blob, 'export_' + Date.now() + '.png');

有趣的是，大小是正确的，唯一缺少的是 .png 中的实际图像。

4

1 回答 1

0

假设saveAs函数启动文件下载，您可以通过将数据 URL 分配给a元素、设置a.download为所需的文件名并使用a.click()来启动文件下载来使用快捷方式：

function canvasToFile()
{
    var canvas = document.getElementsByTagName('canvas')[0];
    canvas.getContext("2d").drawImage(img, 0, 0);
    var a = document.createElement('a');
    a.href = canvas.toDataURL("image/png");
    a.download = 'export_' + Date.now() + '.png';
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
}
// For demo:
var img = document.getElementsByTagName('img')[0];
img.crossOrigin = 'Anonymous';
img.addEventListener('load', canvasToFile);
img.src = 'http://lorempixel.com/400/400/';
<canvas width="400" height="400"/>
<img/>

在某些浏览器中，没有必要附加a到 DOM 树（因此这些行a.style.display = 'none';和document.body.appendChild(a);可以省略），但在其他浏览器中（例如 Firefox，如果我没记错的话）它是。

于 2015-08-05T14:33:24.307 回答