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