将图像转换为 Blob

Question

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

我想原因是我在使用 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'}));
}

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

Answer 1

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

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

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

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

将图像转换为 Blob

Convert image to Blob

blob

canvas

image