HTML5 Canvasでイメージのヒューズ、彩度、明度を調整するにはどうすればよいですか？

Question

可能な最も簡単な方法が好ましい。残念ながら、画像操作についてはあまり知られていません！あなたが使用することができます

Answer 1

globalCompositeOperation、"hue"、"saturation"、"color"、および"luminosity"

• "色相" ソースのものに色相に先の色合いを変更します。
• "彩度"は、彩度をソースの彩度に変更します。
• "カラー"は、ソースの色に変更します。
• 「明るさ」は、あなたが完全な飽和状態に

  ctx.drawImage(image,0,0); // image to change 
  ctx.globalCompositeOperation = "saturation"; 
  ctx.fillStyle = "hsl(0,100%,50%)"; // saturation at 100% 
  ctx.fillRect(0,0,image.width,image.height); // apply the comp filter 
  ctx.globalCompositeOperation = "source-over"; // restore default comp 
  

  を画像彩度を変更したい場合は、より細かく制御したい場合は、必要がありますたとえば、ソース

のものに先の光度を変更しますピクセル単位で行うにはgetImageDataとsetimagedataを使用しますが、これは非常に遅くなる可能性があります。スピードを上げるには、上記のcompモードと速度の比較を行うwebGLフィルタを使用することをお勧めしますが、トレードオフはコードの複雑さです。