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通道（没有透明度）但仍希望质量高，请将其作为质量设置为1（最大）的jpeg发送。

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

您还可以考虑在存储时压缩服务器上的数据，甚至jpeg和webp也有一点空间来进行更多压缩。对于传输，您不必担心，因为这些天大多数数据在离开页面时都被压缩，并且在离开客户端ISP时大多数都是压缩的

将图像转换为Blob

1 个答案: