将图像转换为 Blob

Question

我想将图像数据上传到服务器上的 php 脚本。我有一个图像源的 URL（PNG，图像可能位于不同的服务器上）。我将其加载到 Javascript 图像中，将其绘制到画布中并使用 canvas.toBlob() 方法（或主要不支持的 polyfill）生成包含图像数据的 blob。这很好用，但我认识到生成的 blob 大小比原始图像数据大得多。 相反，如果我使用 HTML 文件输入并让用户在客户端选择图像，则生成的 blob 与原始图像具有相同的大小。我可以从画布中获取与原始图像大小相同的图像数据吗？

我猜原因是我在使用 canvas.toBlob() polyfill 时丢失了 PNG（或任何图像压缩）：

value: function (callback, type, quality) {

    var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i=0; i<len; i++ ) {
        arr[i] = binStr.charCodeAt(i);
    }

    callback(new Blob([arr], {type: type || 'image/png'}));
}

我对通过图像、画布、blob 进行如此多的转换步骤感到困惑 - 所以也许有一种替代方法可以从给定的 URL 获取图像数据，最后将其附加到 FormData 以将其发送到服务器？

Answer 1

当使用 png 格式时，方法 toDataURL 仅使用有限的一组可用于 PNG 文件的可能格式。它是每通道 8 位 RGBA（32 位）压缩格式。没有使用任何其他可用格式的选项，因此当您保存为 PNG 时，您必须包含冗余数据。 PNG 也有 24 位和 8 位格式。 PNG 也有几个可用的压缩选项，虽然我不确定使用哪个，但每个浏览器都可以使用。

在大多数情况下，最好发送原始图像。如果您需要修改图像并且不使用 alpha 通道（无透明度）但仍希望质量较高，请将其作为 jpeg 发送，质量设置为 1（最大值）。

您也可以考虑使用自定义的 PNG 编码器，让您可以访问更多的 PNG 编码选项，甚至可以尝试许多其他可用格式中的一种，或者创建自己的格式，尽管您会很难推动改进 jpeg 和 webp。

你也可以考虑在存储数据的时候在服务器上进行压缩，即使是 jpeg 和 webp 也有一点压缩空间。对于传输，您不必担心，因为如今大多数数据在离开页面时都会被压缩，并且在离开客户端 ISP 时肯定会被压缩