写真を回転する 3 つの解決策_基本-jsチュートリアル-php.cn

写真を回転する 3 つの解決策_基本

WBOY

リリース： 2016-05-16 17:13:21

オリジナル

1126 人が閲覧しました

画像の回転効果の研究
最近、プロジェクトで画像の回転機能を実行する必要があったので、いくつかの研究をしました。さまざまなブラウザでの画像回転のサポートについてまとめてみましょう

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 を使用して画像を回転する方法を見てみましょう

コードは次のとおりです。

コードをコピーしますコードは次のとおりです:

 
var test = function(){
 var Canvas = document.getElementById("result");
 var oImg = document.getElementById("Img"); Canvas.height = 300;
 Canvas.width = 200;
 var context = Canvas.getContext("2d");
 context.save();
 context.translate(200,0) ;
 context.rotate (Math.PI/3);
 context.drawImage(oImg, 0, 0, 300, 200);
 context.restore();
 oImg.style.display = "なし";
};

上記のコードは、最初にキャンバスオブジェクトを取得し、次にその高さを設定して描画を開始します。これにより、キャンバスの中心点と回転角度が変更され、画像がキャンバスに描画されて保存され、

によって前の画像が非表示になります。この方法は比較的スムーズに実装できます。

2. さまざまなソリューションの比較

css3 の実装では、元の画像が占めるスペースのサイズは変わりませんが、IE のフィルターにより、元の画像が占めるスペースのサイズが変わります。空間のサイズ。実際、IE は Canvas スクリプトを引用するだけでサポートできます。これは Google によって提供されています。ただし、このスクリプトは少し大きく、圧縮前に 20k 以上あります
IE ではフィルターを使用し、他のブラウザでは Canvas タグを使用することを好みます。