Blob 图像返回空白图像答案

【问题标题】：Blob image returns blank imageBlob 图像返回空白图像
【发布时间】：2015-10-28 08:21:56
【问题描述】：

我正在尝试从画布数据中提取图像信息并将其显示在 .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 中的实际图像。

【问题讨论】：

为什么需要 blob 对象？
获取要显示的图像。处理的顺序是 canvas -> Base64 -> Blob 其中 canvas 是最初显示数据的方式，调用 toDataURL 时返回 Base64 数据，Blob 对象接收该 Base64 数据。从这里我想从 Blob 生成图像
我认为saveAs 将Blob 保存为文件？为什么不直接从 URL imageDataURL 开始下载？
要显示图像。 你不需要 Blob。只需从画布内容创建新的图像元素并将其放入 DOM。
所以 myImage = new Image();和 myImage = canvasData[4].toDataURL("image/png");?

标签： javascript html image blob todataurl

【解决方案1】：

假设 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，如果我没记错的话）是的。

【讨论】：