0

我正在开发一个在 HTML Canvas 上生成图像的项目，然后提供以 PNG 格式下载图像。

该程序必须是客户端（javascript）。

我可以使用将画布转换为图像

var canvas=document.getElementById('canvas');
var img    = canvas.toDataURL("image/png;base64");

应该下载图片的代码是：

    var container = document.querySelector('#container2');
//container2 is a div in HTML
    var output = container.querySelector('output');
//output is inside container2
    window.URL = window.webkitURL || window.URL;
    var prevLink = output.querySelector('a');
    if (prevLink) {
    window.URL.revokeObjectURL(prevLink.href);
    output.innerHTML = '';}
//removes the download link if already there

            var bb = new Blob([img], {data: "image/png;base64"});
//creates new blob from the img variable
    var a = document.createElement('a');
    a.download = 'test' + '.png';
//file name
    a.href = window.URL.createObjectURL(bb);
//create URL from blob
    a.textContent = 'Click here for download';

    a.dataset.downloadurl = ["image/png;base64", a.download, a.href].join(':');
    output.appendChild(a);

如果 blob 变量是文本字符串而不是“img”变量，则此方法非常有效。我得到的不是图像，而是损坏的 .png 文件，在记事本中打开该文件会给出data:image/png;base64,iVBORw0KGgoAAAANSUhEU...(long string of base64 letters)，这是正确的字符串，但显然不适合 PNG图片。但如果我写

document.write('<img src="'+img+'"/>');

图像在新选项卡中正确打开。

如何使下载的图像不损坏？

（ Canvas2image生成的数据似乎无法下载）

4

1 回答 1

0

看起来您需要将 base64 字符串转换回 blob。方法如下： 客户端 Javascript 中的 Base64 编码和解码

如果某些浏览器能够原生处理 base64，则 document.write 可能适用于这些浏览器。

另一个问题是 JavaScript 通常使用字符串，但要下载文件，您需要类似 ByteArray 的东西。这是一个实现，我发现：https ://github.com/danguer/blog-examples/blob/master/js/base64-binary.js

这就是我当时的工作方式：

var ab = Base64Binary.decodeArrayBuffer(img.substring(22));
var bb = new Blob([ab]);
var a = document.createElement('a');
a.download = 'test' + '.png';
a.href = window.URL.createObjectURL(bb);
a.textContent = 'Click here for download';
output.appendChild(a);
于 2013-04-29T16:52:30.520 回答