Question

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

当我将图像缩放到1时，这意味着，按照原始宽度和高度，图像的输出尺寸几乎是原始图像尺寸的两倍。在此之前，当我使用FileReader readDataAsURL时，输出字符串长度大于图像大小。如何正确使用html canvas和FileReader？

谢谢。

Answer 1

您可以考虑使用Blob代替。浏览器中的Data-URI使用Base-64编码，大小增加了33％，并且data-uri头的形式发生了一些变化。

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

对于FileReader，您可以直接使用File对象createObjectURL()绕过FileReader的使用。 File对象基本上是Blob，带有一些扩展信息，如文件名等。

读取Blob /文件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");

您现在可以上传blob，与数据网址相比，它会更小。

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

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

1 个答案:

读取Blob /文件wo / FileReader

示例Blob导出（toBlob）