[JavaScript] Canvas를 통한 이미지 회전[JavaScript] Canvas를 통한 이미지 회전

Posted at 2020. 3. 4. 11:06 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 휴대폰 사진 업로드시 이미지가 가로, 세로가 변경되는 이유





휴대폰, 스마트폰의 카메라로 찍은 사진을 웹 브라우저를 통해 업로드 할경우,


이미지의 가로, 세로가 변경되어 등록되는 경우가 존재한다.


이러한 이유는 EXIF( Exchangeable Image File Format ) 의


회전값 변경이 반영되지 않기에 생기는 이유인데.



아래 이미지는 초기 스마트 폰에서 자주 볼 수 있었던 문제이다.

( 자이로 센서( Gyro Sensor ) 등의 기술 발전으로 이런 문제는 많이 해결 되었지만, 이미지의 편집등 다른 작업 과정으로 현재에도 이런 문제를 맏닥드릴 수 있다. )









가로로 찍은 이미지의 경우 스마트폰 상에서는 분명 정상적으로 보여주지만.


실제 이미지의 EXIF 값을 보면 회전정보( Orientation )가 90° CW 가 적용되어 있는것을 알 수 있다.


이를 회전정보 값을 브라우저에서는 인식하지 않고 보여지는 문제이다.







   # EXIF( Exchangeable Image File Format ) 란?



   디지털 카메라 등에서 사용되는 이미지 파일 메타데이터 포맷으로,


   카메라가 촬영한 사진, 녹음파일에 시간 등의 각종 정보를 담기 위해 개발되었다. 즉, 


   JPEG, TIFF 6.0과 RIFF, WAV 포맷에 이미지나 소리에 대한 정보를 추가로 기록할 수 있다.


   디지털카메라의 보급으로 널리 활성화되었고 이미지 메타데이터의 사실상 표준 지위에 있다.


   EXIF 데이터는 이미지 파일의 일부로 저장되며,


   EXIF 데이터를 지원하는 소프트웨어 사용 시 이미지를 변경해도 데이터를 보존한다.



   출처 : 나무위키( https://namu.wiki/w/EXIF )






간단하게 이미지 파일 하나를 선택하여 마우스 오른쪽 버튼을 클릭하고


오른쪽으로 회전( T ) 을 선택해 보자.





회전 정보 : 90° CW 로 반영된 것을 확인할 수 있다.


이 렇게 회전된 파일을 <img src="스토브리그.jpg">로 올려서 브라우저로 확인을 해 본다면.



# 소스코드

<html>

<head>

<title>:: 스토브리그 ::</title>

<style type="text/css">

/* image-orientation:from-image; */

</style>

</head>

<body>

<img src="stoveleague.jpg"/>

</body>

</html> 



# 출력결과




회전 정보 : 90° CW가 반영이 <img> 태그를 사용한 경우


브라우저에서 다시 정방향으로 돌려서 출력하는 모습을 확인 할 수 있다.




현재 파이어 폭스 브라우저의경우 CSS에 image-orientation:from-image; 를 넣어주는 것만으로도


회전정보 값을 읽어들여 반영하여 이미지가 돌아가는 것을 막아주어서 해결할 수 있지만.


아직까지 크롬등의 다른 브라우저에서는 CSS4의 실험적 기능이기에 적용되어 있지 않다고 한다.


결국 자동으로 이러한 상황을 해결 할 수는 없는 상황이기에


사용자의 폰, 찍은 각도에 따라 업로드시 문제가 발생할 수 있다.










■ 캔버스를 통한 업로드 이미지 각도 조정




그래서 필자는 이에대한 해결책으로


자동으로 이미지를 보정하는 것이 아닌,


사용자가 직접 수동으로 이미지를 수정하는 방향으로 가닥을 잡고,


다 완성된 정보만을 서버로 전달하는 형태로 취하는 방식을 택하게 되었다.




# 소스코드

<html>

<head>

<title>:: JavaScript 캔버스 - 회전 ::</title>

<script type="text/javascript">


    function uploadImgPreview() {


     // @breif 업로드 파일 읽기

     let fileInfo = document.getElementById("upImgFile").files[0];

     let reader = new FileReader();


     reader.addEventListener("load", function() {


          console.log("INDEX #02");


          // @details 업로드한 파일의 URL을 가져온다.

          document.getElementById("thumbnail").src = reader.result;


     }, false);


     if(fileInfo) {


          console.log("INDEX #01");


          // @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.

          reader.readAsDataURL(fileInfo);

        }

    }


    function rotateCanvasImg( angle ) {


     // @breif 썸네일 이미지 생성

    let tempImage = new Image();                         // @details drawImage 메서드에 넣기 위해 이미지 객체화

        tempImage.src = document.getElementById("thumbnail").src; // @details 업로드 완료된 이미지를 객체에 주입


     tempImage.onload = function() {


          // @breif 캔버스 위에 이미지 그리기

          let canvas = document.getElementById("canvas");

          let canvasContext = canvas.getContext("2d");


          // @breif 왼쪽( 270° ) 회전의 경우

          if( angle == '270' ) {


               // @details 270° 회전의 경우 이미지의 높이와 넓이를 서로 바꿔준다.

               canvas.width = tempImage.height;

canvas.height = tempImage.width;


               canvasContext.rotate((270) * Math.PI / 180);


               // @details 이미지가 270° 회전 했을 경우 x축의 값을 업로드 이미지의 넓이를 음수로 변경한다.

               canvasContext.drawImage(this, (tempImage.width * -1), 0);


          }


// @breif 오른쪽( 90° ) 회전의 경우

          else if( angle == '90' ) {


               // @details 90° 회전의 경우 이미지의 높이와 넓이를 서로 바꿔준다.

               canvas.width = tempImage.height;

canvas.height = tempImage.width;


               // canvasContext.rotate((90) * Math.PI / 180);

               canvasContext.rotate(Math.PI / 2);


               // @details 이미지가 90° 회전 했을 경우 y축의 값을 업로드 이미지의 높이를 음수로 변경한다.

canvasContext.drawImage(this, 0, (tempImage.height * -1));


          }


          // @breif 거꾸로( 180° ) 회전의 경우

          else if( angle == '180' ) {


               canvas.width = tempImage.width;

               canvas.height = tempImage.height;


               // canvasContext.rotate((180) * Math.PI / 180);

               canvasContext.rotate(Math.PI);


               // @details 이미지가 180° 회전 했을 경우 x, y축의 값을 업로드 이미지의 넓이와 높이를 음수로 변경한다.

               canvasContext.drawImage(this, (tempImage.width * -1), (tempImage.height * -1));


          }


          // @breif 정방향

          else {


               canvas.width = tempImage.width;

               canvas.height = tempImage.height;

               canvasContext.drawImage(this, 0, 0);

          }


          // @breif 캔버스의 이미지

          let dataURI = canvas.toDataURL("image/jpeg");

          document.querySelector("#thumbnail").src = dataURI;


     };

    }

</script>

</head>

<body>

    <!-- @breif accept 태그는 파일 업로드시 그것을 이미지 파일로 제한한다. -->

    <input type="file" id="upImgFile" onChange="uploadImgPreview();" accept="image/*">

    &nbsp;|&nbsp;

    <input type="button" onClick="rotateCanvasImg('270');" value="왼쪽(270°)"/>

    &nbsp;|&nbsp;

    <input type="button" onClick="rotateCanvasImg('90');" value="오른쪽(90°)"/>

    &nbsp;|&nbsp;

    <input type="button" onClick="rotateCanvasImg('180');" value="거꾸로(180°)"/>

    &nbsp;|&nbsp;

    <input type="button" onClick="uploadImgPreview();" value="되돌리기"/>

    <hr/>

    <img id="thumbnail" src="">

    <!-- @breif 캔버스는 화면에 노출시키지 않는다. -->

    <canvas id="canvas" style="display:none;"></canvas>

</body>

</html>




# 출력결과




이렇게 이미지 조작이 완료되었다면.


해당 미지를 마우스 우클릭으로 다운받아 보자.








다운받은 이미지는 index.jpg 라는 이름으로 생성되며


회전 정보가 표기되지 않는 0° CW 임을 알 수 있다.


그렇기에 해당 이미지를 <img> TAG를 사용해도 원하는 각도 조절이 가능하기에




사용자의 업로드한 사진의 이미지 축 보정 작업이 끝나고 사진 등록( 파일 업로드 )을 실행하면


편집된 캔버스의 작업내용을 서버에 전송하는 형태로 진행을 하면 된다.






관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#03 : [JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

관련포스팅#04 : [jQuery] JCROP을 이용한 이미지 자르기 - Sample







반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 이미지 파일 업로드하고 썸네일 생성하기  (2) 2020.03.25
[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample  (0) 2020.03.06
[JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기  (0) 2020.03.04
[JavaScript] getElementByTagName( ) 메소드  (0) 2020.02.28
[JavaScript] INPUT TYPE FILE 썸네일 생성  (0) 2020.01.16
//

티스토리툴바