Html 以灰度保存画布

我想知道是否有可能在HTML5中使用彩色画布，然后在单击保存按钮时将其保存为黑白（灰度）PNG。我已经设法将画布保存为PNG，这太棒了！但是我想添加灰度特性，而不必自己用Illustrator等程序来更改它。 画布上有移动的粒子（顺便说一句，我不确定这是否有任何影响）

谢谢~

function download(){
    var dt = c.toDataURL('image/png');
    this.href = dt; 
}; 
downloadlink.addEventListener('click', download, false); 

---

可以从画布中提取RGB数据并计算它们的luma值

不过，需要满足几个必要条件，如CORS（在本例中，这似乎不是问题，因为您已经可以保存图像），如果您希望在保存后保留原始数据，您可以将画布上的当前图像复制到临时图像，或者保留需要提取的像素数据的备份

RGB至卢马 根据REC 709（或BT.709）公式，将RGB数据转换为luma值（灰色）的公式如下：

或者，您可以使用REC 601（BT.601）公式（这在SD视频片段中更常见）：

要使用它，只需在所有像素上迭代，使用其中一个公式获得luma值，并用结果luma值替换目标中的所有通道

临时数据 对于临时数据，我们可以执行以下任一操作（单击“保存”按钮时）：

临时画布

• 创建临时画布
• 将大小设置为“源画布”
• 使用

  drawImage（）在源画布中绘制

• 使用

  getImageData（）

• 迭代像素，使用公式转换，将数据放回原处
• 保存图像，然后丢弃临时画布

或

图像数据备份

• 使用

  getImageData（）

  提取图像数据-这将作为我们的备份
• 使用

  createImageData（）

• 迭代备份中的像素，但将luma中的结果放入已创建的

  ImageData

• 放回创建的

  图像数据

  ，保存图像
• 放回备份数据

后一步是否必要取决于您如何更新画布。如果您正在为循环设置动画，如果所有内容都得到更新，则可能不需要放回备份（或保留备份），但如果是这样，并且您看到灰色闪烁或某些区域保持灰色，则需要执行此步骤

使用

ImageData

方法的示例

var ctx=c.getContext（“2d”），img=new Image；
img.onload=设置；img.crossOrigin=“”；
img.src=“//i.imgur.com/OrYVGI8.jpg”；
函数设置（）{
c、 宽度=this.naturalWidth；c.height=this.naturalHeight；
ctx.drawImage（this，0，0）；btn.disabled=false
}
//演示的主要代码
btn.onclick=函数（）{
var idataSrc=ctx.getImageData（0，0，c.width，c.height），//原始
idataTrg=ctx.createImageData（c.width，c.height），//空数据
dataSrc=idataSrc.data，//引用数据本身
dataTrg=idataTrg.data，
len=dataSrc.length，i=0，luma；
//通过迭代每个代表RGBA的像素进行转换
对于（；i
保存为灰色（单击然后向下滚动查看结果）


我建议像这样计算luma：

var luma = (11 * obj.data[i] + 16 * obj.data[i + 1] +  5 * obj.data[i + 2]) >> 5;

或者，在白色画布上绘制图像之前，可以使用
ctx.globalCompositeOperation='luminity'
，虽然没有那么有趣，但效果相同（：
针对浏览器/混合内容（http[s]）更新的示例）。
luma = Red x 0.299 + Green x 0.587 + Blue x 0.114

var luma = (11 * obj.data[i] + 16 * obj.data[i + 1] +  5 * obj.data[i + 2]) >> 5;