CanvasRenderingContext2D.filterでCanvasをグレースケールにする 🖼

以前、ピクセルデータを編集することでCanvasをグレースケールにしました。

blog.kimizuka.org

今回は CanvasRenderingContext2D.filter をつかってグレースケール化を試します。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const video = document.createElement('video');

video.src = 'movie.mp4';

ctx.filter = 'grayscale(100%)';
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

ソースの重要なところは、

ctx.filter = 'grayscale(100%)';

この部分で、コンテキストのフィルターに文字列でフィルターを渡すだけでOKです。
パーセンテージの部分はどの程度グレースケールにするかで、100%でグレースケール、0%でフルカラーになります。

DEMO

develop.kimizuka.org

前回と比べるとかなり簡潔にかけるので、どんどん使っていきたいところですが、残念ながら現状ではSafariで動きません。
なので、iOSを対応しなければならないケースでは使えません。
ということは、実戦投入はまだやめておいた方が良さそうです。なんてこった。

CanvasRenderingContext2D.filter にはグレースケール以外にも便利なフィイルターが用意されているので、Electronアプリなど、限られた環境で活用していきつつ、Safariの対応を待とうと思います。