純粋なスタイルまたは JS キャンバスを使用して画像の回転を実現します

効果は次の図に示すとおりです。

クリックして回転すると、それに応じて画像も回転します。方向は0度、90度、180度、270度の合計4方向です。

1. CSS3の実装

私の考えによれば、当然CSS3使用されるtransform属性ですrotate。

img{
    
    
    transform:rotate(90deg);
}

実際の状況を回転することもできます。これは簡単で便利ですが、一時的な表示にのみ適しています。

2、JSキャンバスの実装

原理は大まかに言うと、img画像をcanvasオブジェクトに変換し、新たな画像パスを出力してimgタグにechoするというものです。

一般的なコードは次のとおりです。

/** 图片旋转后返回base64
 * @param {Object} img 图片对象
 * @param {Number} rotate 旋转角度 90° 180° 270° 360°=default
 * @returns {String} base64图片
 *
 */
export function imageRotate(img, rotate) {
    
    
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  switch (rotate) {
    
    
    case 90: // 旋转90°
      canvas.width = img.height;
      canvas.height = img.width;
      ctx.rotate((90 * Math.PI) / 180);
      ctx.drawImage(img, 0, -img.height, img.width, img.height);
      break;
    case 180: // 旋转180°
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.rotate((180 * Math.PI) / 180);
      ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
      break;
    case 270: // 旋转270°
      canvas.width = img.height;
      canvas.height = img.width;
      ctx.rotate((-90 * Math.PI) / 180);
      ctx.drawImage(img, -img.width, 0, img.width, img.height);
      break;
    default:
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      break;
  }
  return canvas.toDataURL("image/png");
}

上記のコードを次のように保存しますrotate.js

回転アイコンをクリックすると、この関数が呼び出され、画像オブジェクトと回転角度が渡されます。

import imageRotate from './rotate';
methods:{
    
    
	this.base64 = imageRotate(this.data, rotate);
}
// base64即为可直接显示图片的base64地址
<img :src="base64" />

上記を vue プロジェクトで使用しても問題ありません。

Web フロントエンド開発、面接、フロントエンド学習ルートで問題がある場合は、V: imqdcnn を追加してください。無料で質問に回答し、長年業界に深く携わってきた技術専門家がバグの解決を支援します。

優秀なWEBフロントエンド開発エンジニアになってください！