5

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

6
  • どのように画像を回転させているのかを詳しく教えていただければありがたいです。お願いします Commented 2014年12月2日 15:04
  • 回転はCSS3のtransform: rotate();プロパティでしょうか?
    – mutuki
    Commented 2014年12月2日 16:12
  • CSS3のtransform: rotate();プロパティや、JavaScriptのCanvas 2D Context の rotate() を使って、画像を微妙に(例えば5度程度)回転した際にジャギが目立ちました。
    – hideya
    Commented 2014年12月2日 20:25
  • @SotaYamashita jqueryっぽく回転する実装[ja.stackoverflow.com/questions/290/… Commented 2014年12月3日 2:49
  • 具体的にどのように画像を回転させているか明示した方が良いと思います。また、どのようにギザギザになっているか、可能であれば画像をアップした方が回答者の助けになると思います。
    – tomute
    Commented 2014年12月4日 14:11

3 件の回答 3

7

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

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

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

1

画像を上下左右1ピクセル大きくして、1ピクセル幅の透明の縁をつけると、回転してもジャギらなくなります。

1
  • その場合のソースコードを教えていただけると助かります。
    – naota
    Commented 2014年12月5日 1:36
1

ジャギの出るのはどのブラウザでもでしょうか?
Firefoxであれば下記が参考になるかと思います。

https://stackoverflow.com/questions/9235342/3d-css-transform-jagged-edges-in-firefox

body {
  -moz-perspective: 800px;
}

div {
  -moz-transform: rotateX(45deg);
  border: 1px solid white;
}
<div style="display:inline-block; width:10em; height:10em; background:hotpink;margin-left:8em;"></div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。