순수한 스타일 또는 JS 캔버스를 사용하여 이미지 회전 달성

효과는 그림과 같습니다.

클릭하여 회전하면 그림이 그에 따라 회전합니다. 0, 90, 180, 270도 총 4가지 방향이 있습니다.

1. CSS3 구현

내 생각대로라면 당연히 CSS3사용하는 transform속성 이다 rotate.

img{
    
    
    transform:rotate(90deg);
}

실제 상황도 회전할 수 있어 간단하고 편리하며 일시적인 보기에만 적합합니다.

둘, JS 캔버스 구현

대략적인 원리는 img 이미지를 캔버스 객체로 변환하여 새로운 이미지 경로를 출력하고 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 프로젝트에서 위를 사용하는 데 문제가 없습니다.

웹 프론트엔드 개발, 인터뷰, 프론트엔드 학습 루트에 어려움이 있다면 저를 V:imqdcnn에 추가하시면 됩니다. 무료로 질문에 답변하고, 수년 동안 업계에 깊숙이 몸담은 기술 전문가가 버그를 해결하는 데 도움을 줄 것입니다.

당신이 훌륭한 WEB 프론트엔드 개발 엔지니어가 되기를 바랍니다!