2014 04 27

chromeでもcanvasできれいに画像をトリミングする

HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム
2010年の記事ですが、こちらの記事の「クリップ境界のアンチエリアス (clip)」にあるように、chromeではclipで切り抜いたときにアンチエイリアスがかからない。

これ、2014年4月現在でもそうで、レガシーブラウザならしょうがないよね、ってなるけどchromeでなるのはほっとけない感じ。
どうにかならないかと探してたら、下記の記事を見つけた。
How to anti-alias clip() edges in html5 canvas under Chrome Windows? - Stack Overflow

clipではなく、fillで画像を円状に書き出せばOKっぽい。
以下サンプル。

clipでトリミング。エッジ汚い(chromeで)

See the Pen pnrAJ by hiroaki tachibana (@eedamame) on CodePen.

fillでトリミング。エッジきれい(chromeでも)

See the Pen kEFgD by hiroaki tachibana (@eedamame) on CodePen.

じゃあ全部fillでいいやん、って思ったけど、androidでfillだとクリッピングしてくれない模様。

とりあえずModernizrでタッチでバイスではclip、それ以外ではfillでやれば、canvasの対応ブラウザ全部でうまくトリミングできるのでは。 という対応をしてみたのが以下。

See the Pen chrome, android対応版 by hiroaki tachibana (@eedamame) on CodePen.

ついでに使い回しの効く関数にしてみました。
github自分であげたことほぼなかったので、その練習も兼ねて…
https://github.com/eedamame/clipCircleCanvas