更有效地发送画布内容答案

【问题标题】：Send content of a canvas more efficiently更有效地发送画布内容
【发布时间】：2013-06-30 13:36:41
【问题描述】：

我想发送一个透明的画布。不幸的是，渲染为 PNG 的画布非常大。有什么办法可以让传输变得更小吗？

var canvasPNG = canvas.toDataURL();  //sending it to the server

【问题讨论】：

【解决方案1】：

如果您将其作为带有 alpha 通道的 png 发送，则并非如此。

您可以做的是将图像作为两个 jpeg 图像发送：一个包含 rgb 的图像，另一个代表 alpha 通道的灰度图像，然后在服务器上从这些图像创建一个 png。

【讨论】：

但是取出通道的颜色意味着过滤每个像素，这也需要很长时间，还是有自定义方法？
您可以创建灰度图像，而无需遍历像素。创建一个新的画布并用白色填充它。然后使用 globalCompositeOperation = "destination-in" 将要传输的图像绘制到其中。然后把这张只包含白色和透明的图像绘制到黑色画布上。您现在有一个灰度图像，其中黑色代表完全透明，白色代表不透明。
但是我需要打开服务器任何黑色到透明的像素，或者当服务器将掩码和img数据发送到另一个客户端时在客户端
是的，但是在服务器端，如果您可以控制它，通常会有更多选择。许多图像处理库支持将通道数据复制作为一项操作。因此，您基本上将灰度图像中的一个通道（无论哪个通道，因为它是灰度）复制到彩色图像中的 alpha 通道。
好的，看起来您正在使用 node.js 在 javascript 客户端之间发送图像。在这种情况下，听起来最好不要将灰度图像作为jpg发送，而是将具有透明度的白色图像作为png发送（因为它只包含具有不同alpha值的白色，它应该像png一样压缩，假设有大完全透明的区域或完全不透明的大区域）并使用 globalCompositeOperation 将其用作客户端颜色 jpg 的蒙版。