javascript - 如何将 PNG 转换为 JPG(客户端)，然后再转换回 PNG(服务器端)，同时保留全透明和半透明像素？

Question

我正在用 HTML5 + JS 编写应用程序，有时我需要上传 <canvas> 的内容元素，上面绘制了一些 PNG 文件。所以我在做:

$('#img').val(canvasElement.toDataURL()); 

如您所见，我没有为 toDataURL 函数提供任何参数，因此提取的图像将采用 PNG 格式。 #img是一个文本输入(具有名称属性“img”)，稍后用于将从 Canvas 中提取的图像的 base64 表示上传到服务器。我使用 AJAX 来实现，请求一个包含以下代码的 PHP 文件:

$data = explode(',', $_POST['img']);
$imgdata = base64_decode($data[1]);

$ifp = fopen('superGraphicFile.png', "wb");
fwrite($ifp, $imgdata); 
fclose($ifp);

这行得通，但不幸的是，300x600 的 PNG 文件足以让 AJAX 请求持续很长时间(比如 20 秒)，因为那时文件大小约为 400 kB。就我而言，所需的时间量是 Not Acceptable 。

我想知道如何减少发送到服务器的数据量，我认为以 JPG 格式发送它会很酷，因为我们可以指定从 Canvas 中提取的 JPEG 图像的质量。例如，调用 toDataURL('image/jpeg',0.7) , 使文件比不带参数调用它小 10 倍。但是，我必须保留原始 PNG 文件的透明度信息，由于 JPG 无法做到这一点，我想发明一些方法在服务器端重新创建原始 PNG。

起初，我想用某种特定颜色填充原始 PNG 中的所有透明像素，将其转换为 JPG，发送到服务器，然后用透明像素替换所有具有该颜色的像素。然而，这可能行不通，因为我还需要保留原始图像的半透明像素。也许有一些方法可以从原始图像中提取 alpha channel ，将其作为另一个 JPG 发送到服务器并在服务器端将其用作蒙版，以这种方式重新创建原始 PNG？还是我遗漏了一些其他解决方案？

我提前感谢您的所有建议。

编辑: 我写的 20 秒可能是我的互联网连接出现了一些问题，因为我没有做任何更改，现在传输 400 kb 的数据大约需要一秒钟。但我仍然认为，将服务器资源节省十倍并提高应用程序的运行速度将是一件很酷的事情。

Answer 1

恐怕您正在尝试使用肮脏的解决方法(无意冒犯)来解决您的问题。将 PNG 转换为 JPEG 然后再转换回 PNG 将始终是一种有损转换(包括 alpha channel 的丢失)，并且会比仅发送原始文件消耗更多的 CPU 周期。

最好的办法可能是查看代码内部并尝试以某种方式对其进行优化。在当今的网络和 PC 中，400kB 的传输/处理不应花费 20 秒。同样在某些情况下，JPEG 可能比 PNG 大得多 - 例如窗口的屏幕截图将是例如PNG 格式为 141kB，JPEG 格式为 245kB。

另一方面，如果使用有损格式真的更好，那么您可以看看这个。我发现，还有一些其他的 types支持透明度。也许您可以尝试使用 tiff 图像格式，它可以包括图像数据和 alpha channel (希望使用 JPEG 压缩)。唯一的问题是，我只知道一种开箱即用的支持 TIFF 的浏览器 (Safari)。

最好的选择可能是转换为 GIF。它是无损的，并且会保持透明度。当然没有半透明和有限的颜色。

另一种选择是使用 JPEG 2000因为它具有更高的压缩率和更低的质量损失，并且还支持 alpha channel 。 Safari 再次支持它，但 Firefox 需要一个插件。我记得几年前我有一个用于 JPEG 2k 的 M$ Internet Explorer 插件。我不知道有任何其他支持 JPEG 2k 的“主要”浏览器。