이미지 회전 (자바스크립트/타입스크립트)

React에서 사진 회전시 사용방법

 

업로드한 이미지파일(photo)과 회전할 각도(rotation), 배열이라면 인덱스(idx)를 받아오는 함수를 만든다.

// rotateImage 라는 함수를 만들고 받아오는 인자값으로 photo, rotation, idx 를 지정하여 함수를 생성
// : any, : number 등의 타입스크립트이므로 자바스크립트라면 저 부분을 없애고 넣으시면 됩니다.

const rotateImage = (photo: any, rotation: number, idx: number) => {

}

 

다음으로 위 생성 함수 안에 new Image() 로 이미지 객체를 생성해줍니다.

// img라는 변수에 이미지 객체를 할당시켜줍니다.
let img = new Image();

 

그럼 img 라는 변수는 이미지 객체로 사용할 수 있게 됩니다.
그 다음은 img의 source(소스)에 회전하기 위해 인자로 넘긴 이미지파일의 _previewURL을 넣어줍니다.

/*
const rotateImage = (photo: any, rotation: number, idx: number) => {
rotateImage 함수의 인자로 받은 photo(이미지파일 객체)
*/

img.src = photo._previewURL; // photo 이미지파일 객체에 있는 _previewURL 속성을 할당

 

현재까지 코드는 이렇습니다.

  const rotateImage = (photo: any, rotation: number, idx: number) => {
    
    let img = new Image();
    img.src = photo._previewURL;
    
}

 

그 다음으로 함수 내부에서 만든 img 객체가 준비되면 실행할 문장을 추가해줘야 되는데요.

img 객체가 준비되었다면 그 내부에서 실행할 코드를 작성해주면 되는데 이미지를 회전시킬거기 때문에 canvas 객체를 하나 만들어 줍니다.

const rotateImage = (photo: any, rotation: number, idx: number) => {
    
    let img = new Image();
    img.src = photo._previewURL;
    img.onload = () => {
      let canvas = document.createElement('canvas');

// img.onload : 이미지가 준비되면 그 다음 것을 실행시켜라
// img.onload = () => { 실행문 }
// let canvas = document.createElement('canvas'); // 도큐먼트에 canvas 객체를 하나 만들고 그것을 canvas라는 변수에 할당해라

 

그럼 img객체가 준비되고 준비되면 실행될 실행문 안에서 canvas라는 객체를 도큐먼트에 하나 만들어서 그걸 canvas라는 변수에 할당해줬습니다.

그 다음으로 얼마만큼 회전시킬 것인가를 canvas객체에 대입시켜줘서 회전을 시키면 되는데요.

 

// 중간부분 추후 채울 예정.. 현재 회사일하는걸로 잠시만 기다려주세요.

 

완성 코드는 아래와 같습니다.

// 사진 회전
  const rotateImage = (photo: any, rotation: number, idx: number) => {
    
    let img = new Image();
    img.src = photo._previewURL;
    img.onload = () => {
      let canvas = document.createElement('canvas');

      if ([90, 270].indexOf(rotation) > -1) {
        canvas.width = img.height;
        canvas.height = img.width;
      } else {
        canvas.width = img.width;
        canvas.height = img.height;
      }

      let context = canvas.getContext('2d');
      context?.translate(canvas.width * 0.5, canvas.height * 0.5);
      context?.rotate(0.5 * Math.PI);
      context?.translate(-canvas.height * 0.5, -canvas.width * 0.5);
      context?.drawImage(img, 0, 0);

      let changeImage = canvas.toDataURL('image/jpg');

      let newArr = changeArray.map((item: any, i: number) => {
        if (idx === i) {
          return { ...item, _previewURL: changeImage };
        } else {
          return { ...item };
        }
      });

      setChangeArray(newArr);
    };
  };