rotateした画像(imgタグ、pngファイル)をiphoneシュミレータで表示すると、画像の縁のところがギザギザになってしまいます(PCのchromeなら大丈夫です)。この問題の具体的な解決方法をご教授ください。
実装は、html,css,jsならなんでも大丈夫です。
*問題のコード
#image{
-webkit-transform: rotate(-18deg);
}
#先生を募集しています。詳細はコメント欄をご参照ください。
No.3
1504
493
75pt
ビットマップでジャギーがでるのは仕方がないのでcanvasやsvgに変えるとか。
iphoneシミレータでギザギザでも実機で問題なかったら別に困らないと思うのですが。
No.1
12817
75pt
画像補間法の説明
多値画像（グレイ画像）やカラー画像を用いて、高精度な画像処理
（回転、拡大、変形等）を行う際に避けて通れないのが、
「画像補間法」である。
たとえば上の黄と青の図形を左に回転させることを考えます。
このような回転処理を施した画像を生成するには、
回転後の画像のある画素が回転前のどの画素に対応しているかを、
全画素について計算すればよいのです。
たとえば上の説明図で、回転画像の点Ａは原画上の点Ａ'から、
点Ｂは原画上の点Ｂ'から、点Ｃは原画上の点Ｃ'から、
その濃度値を取得すれば良い。
ところで、点Ａ'のように原画の画素のほぼ中心にくる場合は選択の余地はないが、点Ｂ'のように青画素と背景（白）画素との中間にくる場合や、
点Ｃ'のように４つの画素の中間にくる場合は、
どの画素の濃度値を取得すればよいか迷ってしまいます。
ので、対応点の濃度値の取得方法として、以下の３つの手法が知られている。
１）ニアレストネイバー法(nearest neighbor)
一般的に、回転後の画像のある画素に対応する、回転前の画像の画素の座標は、
整数値を取らず実数値を取る。
よって最近傍の画素を選択し、この濃度値を回転後の画像の対応画素に
描き込む方法が、ニアレストネイバー法である。
ただし、９０°、１８０°、２７０°のような９０°毎以外の回転では、 ±0.5画素未満の量子化誤差（実数を整数とみなしたことによる）を伴うため、
エッジにはジャギー（ギザギザ）が発生してしまう。
なので、ニアレストネイバー法は「ＮＧ」
２）バイリニア法（bi-linear interpolation）
ニアレストネイバー法では最近傍の画素を選択したが、
バイリニア法では周囲の４つの画素の濃度値から、
その座標（実数値）に応じて線形の濃度補間（X,Y共に）を行う。
３）バイキュービック法（bi-cubic convolution）
バイリニア法よりも高精度で補間を行うために、
周囲の１６個の画素の濃度値から、３次関数を用いて補間する。（X,Y共に）
補間に用いる式はsin(πｘ）/πｘで、
理論（サンプリング定理）的には最も完全な濃度補間式である。
これをテイラー展開で3次の項で近似し、補間式として用いる。
結果的に、「ぷりっぷりのおしり」さんは、
３の「バイキュービック法」が向いています。
是非、実行してみて下さい。
No.2
83
75pt
ペッタンさんが解説されている画素補完のアルゴリズムは、画像を編集する際に元々存在しなかった点の色を、周辺の点の色からどうやって補完するか、といったアルゴリズムです。
ブラウザが画像を回転させる時、ブラウザ内ではまさにこの画素補完が行われている事になりますが、ブラウザがどういったアルゴリズムを採用するかによって、その見た目の美しさに差が出ます。
さて、CSS による画像の回転についてですが、CSS では「画素補完のアルゴリズムに何を使うか」といった事は指定出来ず、ブラウザ側の裁量に任されています。使うブラウザによって見た目が異なるのはこのためです。
一般に、美しく見える画素補完ほど計算量が多いので、表示速度を優先させるため、従来のブラウザでは美しくないアルゴリズムが採用される事が多くありました。
最近では PC のパフォーマンス向上に合わせて、美しいアルゴリズムを採用する風潮に変わりましたが、ご利用になっているシミュレータはそのようにはなっていないという事です。
ですので、CSS で画像を回転させている限りは、今後のブラウザのバージョンアップなどによって不意に綺麗になったりする事もあり得るという事になります。
またそもそも前述の理由から、CSS の指定によって全てのブラウザで同様の見た目を保証する事は不可能です。
ではどのようにすれば常に美しい結果が得られるかというと、CSS で画像を回転させる事を諦めるしかありません。
JS を利用出来るという事であれば、canvas タグに画像を貼り付けて回転させる、SVG に画像を取り込んで回転させる、という方法でも画像を回転させる事が出来ます。
実際に試してみないと分かりませんが、この方法だと回転画像が綺麗に表示される可能性はあります。
しかしいずれの方法も、画像を回転させる際の画素補完アルゴリズムはブラウザに任されているため、たまたまその方法で綺麗だったに過ぎず、ブラウザごとに差異がある状況は解消されません。
一番簡単で確実に綺麗に見せる方法は、本末転倒かも知れませんが、画像編集ソフトを用いて回転済みの画像をあらかじめ用意してしまう事です。
この場合は、画素補完のアルゴリズムを選択して編集する事も可能でしょう。
あらかじめ画像を用意出来ない事情がある場合、私個人としてのお勧めは、CSS で回転させる今の実装のままとして、ブラウザによって綺麗に表示されない事があるのは諦めて、将来のバージョンアップに期待する、というものです。
これは、プログレッシブエンハンスメントという、最近注目を浴びている Web 制作の考え方に近いものになります。
No.3
1504493
ここでベストアンサー
75pt
ビットマップでジャギーがでるのは仕方がないのでcanvasやsvgに変えるとか。
iphoneシミレータでギザギザでも実機で問題なかったら別に困らないと思うのですが。
ぷりっぷりのおしり
2011/10/08 21:10:39
49
46
Cherenkov
ペッタン
1
2
回答ありがとうございます。
難しそうですが、試してみます。