如何使用javascript导出图像数据

Question

我从画布获取图像数据如下：

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

然后我将de image数据传递给anchor

的href属性

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

问题是，当我尝试下载图像chrome崩溃时， 我尝试了其他较小的画布和那个工作，但是大小为

width="2600" height="3400" 

不起作用

感谢任何帮助

Answer 1

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

解决方法＃1

Canvas是一个像图像一样重要的位图，唯一的区别是它可以使用JavaScript进行编辑。

因此，不要将画布转换为图像，只需将canvas元素插入DOM即可。从用户的角度来看，它的行为就像一张图片。

如果您需要用户下载图片，您只需右键单击并按“＆＃34;另存为＆＃34;图像（目前大多数浏览器都支持）。

解决方法＃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通道。

然而，这可能仅仅是＆＃34;如果您需要跨浏览器尽可能多的兼容性，请选择左侧：

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

解决方法＃4

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

这显然是一个高流量负载选项，并且不是非常用户友好，因为您将从用户端上游向服务器发送~44mb（问题的大小）（考虑到大多数ADSL​​用户特别限制了上游这可能需要花费很长时间来试验用户的耐心，这绝不是一个好主意......）。

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

解决方法＃5（原则上）

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