javascript - 如何用javascript导出图像数据

Question

我从 Canvas 获取图像数据如下:

var img = mycanvas.toDataURL("image/png;base64;");

然后我将图像数据传递给 anchor 的 href 属性

$("#imagenMapa2").prop("src",img);

问题是，当我尝试下载图像时，chrome 崩溃了， 我尝试使用其他较小的 Canvas 并且可以工作，但是尺寸为

width="2600" height="3400" 

不起作用

感谢任何帮助

Answer 1

问题是浏览器可能适用也可能不适用 length limits to data-URIs 。不幸的是，没有办法解决这个问题，但希望他们增加这个限制。对于现代计算机来说，数据本身不是问题。

解决方法#1

Canvas 本质上是位图，就像图像一样，唯一的区别是它可以使用 JavaScript 进行编辑。

因此，无需将 Canvas 转换为图像，只需将 Canvas 元素插入到 DOM 中即可。从用户的 Angular 来看，它的行为就像图像一样。

如果您需要用户下载图像，您只能让用户右键单击并“另存为”图像(目前大多数浏览器都支持)。

解决方法 #2

另一个选项是使用 Blob 。几乎所有浏览器都支持 Blob，但 almost none support canvas.toBlob() 但是(只有 Firefox 可以，IE 10+ 带前缀)，所以你在这里也会遇到限制。

此示例来自MDN's page :

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

解决方法 #3

或者，如另一个答案中所述，使用高压缩比的有损压缩 JPEG。您也会失去 Alpha channel 。

但是，如果您需要尽可能多的跨浏览器兼容性，这可能是剩下的“唯一”选项:

var dataURI = canvas.toDataURL("image/jpeg", 0.2);  // type, enc. option <0.0, 1.0]

解决方法#4

您还可以将原始位图发送至server as ArrayBuffer 在帖子中，然后在服务器端对原始数据进行编码并将图像发送回用户以供下载。

这显然是一个高流量负载选项，并且对用户不太友好，因为您将从用户端向服务器上游发送约 44mb(问题的大小)(考虑到大多数 ADSL 用户的上行流量特别有限)评价这可能需要很长时间考验用户的耐心，这从来都不是一个好主意......)。

如果这是特殊用途，即。内联网或类似的，这是可行的，但通常不推荐。

解决方法#5(原则上)

最后一个选项基本上是使用 JavaScript 使用低级 ArrayBuffer 将原始位图数据编码为 PNG。不过，我还不知道有任何库可以进行编码，所以这个选项目前只能留给漫长的夜晚......