HTML5で画像を回転させると縁にジャギが出てしまう


HTML5で画像を回転させて表示させると、斜めになった画像の縁の部分がギザギザになってしまいます。このジャギを回避する方法はないでしょうか？




imgへの`transform:
rotate();`の適用でもcanvasでもそうなのですが、どちらもベクターではなくピクセル操作になるので、計算上端数が出るとジャギが見えると思いますし、ディスプレイのppiでも影響するので完全なコントロールは難しいかもしれませんね。  
前述の制約があるとして、その中で工夫するのであれば

  * borderを使ってnピクセルぶんの縁を作ってベクターラインで囲む
  * `box-shadow`を使ってドロップシャドウを生成してジャギが目立つ部分側に適用する
  * 表示するサイズの2倍のイメージを用意して、サイズ指定で50%表示で使うことでサンプリング数をあげる

あたりを組み合わせて試してみると良いと思います。

