ホームページ > 記事 > ウェブフロントエンド > 写真を回転する 3 つの解決策_基本
画像の回転効果の研究
最近、プロジェクトで画像の回転機能を実行する必要があったので、いくつかの研究をしました。さまざまなブラウザでの画像回転のサポートについてまとめてみましょう
1. 画像回転計画
1) CSS3 は画像回転機能を実装しています。サポートされているブラウザは chrome と Firefox、opera はサポートされていません。
具体的なコードは次のとおりです: -moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);
上記のコードは画像を時計回りに 90 度回転することを意味します。実際には回転できます。程度を問わず。ただし、CSS3をサポートしているブラウザはchrome、firefox3.6、safariのみでieブラウザはサポートしていません。では、IE
ではどのように対処すればよいのでしょうか?したがって、次の解決策があります
2) IE でフィルターを回転させます
具体的なコードは次のとおりです: filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
ここでの回転パラメータは 0、1、2、3 にすることができます。これは、これらの数値に 90 回転を乗算することを意味します。角度。 IE で任意の角度に回転したい場合は、行列変換フィルターを使用する必要があります。
ほとんどの人は、90 の倍数の変換を使用します。ここでは、任意の角度については説明しません。ただし、ブラウザが Internet Explorer ではなく、CSS3 をサポートしていない場合は、画像の回転を認識すると、キャンバスも画像を回転できます。
3) キャンバスを使用して画像を回転します
Canvas は、Chrome、Firefox、Opera などのブラウザでサポートされており、JavaScript に基づいた描画 API を備えています。まず、キャンバス JavaScript を使用して画像を回転する方法を見てみましょう
コードは次のとおりです。
によって前の画像が非表示になります。この方法は比較的スムーズに実装できます。
2. さまざまなソリューションの比較
css3 の実装では、元の画像が占めるスペースのサイズは変わりませんが、IE のフィルターにより、元の画像が占めるスペースのサイズが変わります。空間のサイズ。 実際、IE は Canvas スクリプトを引用するだけでサポートできます。これは Google によって提供されています。ただし、このスクリプトは少し大きく、圧縮前に 20k 以上あります
IE ではフィルターを使用し、他のブラウザでは Canvas タグを使用することを好みます。