ホームページ > ウェブフロントエンド > jsチュートリアル > js_javascript スキルを使用して画像の回転を実現する 3 つの方法

js_javascript スキルを使用して画像の回転を実現する 3 つの方法

WBOY
リリース: 2016-05-16 16:53:04
オリジナル
2206 人が閲覧しました

1 jQueryRotate.js を使用します

代案例:

复制代 代以下:


















测试結果:chrome 下効果正常,回転转後 img オブジェクトは img オブジェクト;ie8 下効果正常,ただし回転後 img オブジェクトは下面オブジェクト,原因オブジェクト変化,若回転後仍按画像の回転後に他の操作を行わない場合、このメソッドを使用して画像オブジェクトを取得できます。これは、js エラーになる可能性があります。
代打代打次のように:






2 Microsoft が提供する Matrix オブジェクトを使用します

例代:
复制代代幣如下:

















テスト結果:chrome 下の効果は正常ですが、回転後の img オブジェクトは Canvas の通常のオブジェクトに変化しました。ie8 下の効果、回転後の img オブジェクトは img オブジェクトになりました。Matrix() パラメータが多すぎて、使用時間がかかります

3 Microsoft が提供する BasicImage オブジェクトを使用します

例のコード:

のコード 代码如下:













結果: chrome では回転できません。ie8 では効果は正常で、回転後も img オブジェクトは img オブジェクトのままです。 BasicImage() にはパラメータが 1 つだけあります。

これら 3 つのメソッドのコードを見ると、本質的には解決策であることがわかります。Chrome では Canvas オブジェクトを使用し、ie8 では VML または Matrix() または BasicImage() を使用します。最近コンポーネントを改修しました。これには画像の回転と拡大が含まれます。IE8 では jQueryRotate.js が新しいオブジェクトを生成するため、画像を拡大する前に画像を選択するときに特別な処理が必要です。最終的に、chrome と ie8 を別々に処理することが決定され、chrome で実装するには jQueryRotate が使用され、ie8 ではコードの単純さと読みやすさを確保するために BasicImage() が使用されました。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート