如何使用 javascript 导出 img 数据

Question

我从canvas获取图像数据如下：

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

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

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

问题是当我尝试下载图像时 chrome 崩溃了，我尝试使用其他较小的 canvas 并且有效，但大小为

width="2600" height="3400"

不起作用

感谢任何帮助

Answer 1

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

解决方法#1

Canvas 是基本的位图，就像图像一样，唯一的区别是它可以使用 JavaScript.

进行编辑

因此，无需将 canvas 转换为图像，只需将 canvas 元素插入 DOM。从用户的角度来看，它的行为就像图像一样。

如果您需要用户下载图像，您只能让用户右键单击并"save as"图像（目前大多数浏览器都支持）。

解决方法 #2

另一个选项是使用 Blob. Virtually all browsers supports Blobs, but 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 通道。

但是，如果您需要尽可能多的跨浏览器兼容性，这可能是 "only" 选项：

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

解决方法#4

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

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

如果这是特殊用途，即。 Intranet或类似的，它是可行的，但一般不推荐。

解决方法 #5（原则上）

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

如何使用 javascript 导出 img 数据

How export img data with javascript

javascript

html

html5-canvas

解决方法#1

解决方法 #2

解决方法#3

解决方法#4

解决方法 #5（原则上）