html5 canvas.toDataURL 输出大小大于原始图像大小

Question

我只是尝试在使用画布上传之前在 javascript 中调整图像大小。我按照这里的说明进行操作：https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/。

当我将图像缩放为 1 时，即按照原始宽度和高度，图像的输出大小几乎是原始图像大小的两倍。在此之前，当我使用 FileReader 读取DataAsURL 时，输出字符串长度大于图像大小。如何正确使用html canvas和FileReader？

谢谢。

Answer 1

您可以考虑改用 Blob。浏览器中的 Data-URI 使用 Base-64 编码，大小增加了 33%，并且 data-uri 标头的形式有所改变。

要改用 blob，您需要记住代码是异步的。此外，由于从浏览器导出的图像始终为 RGBA 格式，因此无法保证生成的图像小于原始图像，而原始 PNG 源图像可以索引，灰度，仅 RGB，有更好的压缩等等。

对于 FileReader，您可以直接将 File 对象与 createObjectURL() 一起使用，而无需使用 FileReader。 File 对象基本上是一个 Blob 带有一些扩展信息，例如文件名等。

读取 Blob/File wo/FileReader 的示例

这假设输入字段使用下面的changeHandler 来处理事件（并且此示例仅处理单个文件）：

function changeHandler() {
  var img = new Image();
  img.onload = drawImageToCanvas;
  img.src = (URL || webkitURL).createObjectURL(this.files[0]);
}

function drawImageToCanvas() {
  // modify canvas size here if needed
  ctx.drawImage(this, 0, 0);  // draw image to canvas
  // since we're async., continue from here (or use promises)
}

示例 Blob 导出 (toBlob)

使用 blob 导出：

canvas.toBlob(function(blob) {
  // blob now contains the PNG file
  // This code is called asynchronous, so continue from here.
}, "image/png");

您现在可以上传比 Data-URL 更小的 Blob。

某些浏览器可能需要toBlob() 的polyfill（或者只是进行功能检测并在这些浏览器中使用toDataURL() 作为后备）。