Question

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

Answer 1

假设saveAs函数启动文件下载，您只需将数据URL分配给a元素，将a.download设置为所需的文件名，然后使用a.click()开始下载文件：

＆＃13;

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/';

＆＃13;

<canvas width="400" height="400"/>
<img/>

＆＃13;

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

Blob图像返回空白图像

1 个答案: