이미지 뷰어형태로 당장 올릴 이미지를 미리보기형태로 작은모습으로 보여주는 기능을 만들고 있었는데, 스마트폰에서 찍은 사진을 테스트하다 보면 자동으로 회전되어 보이는 현상이 있었습니다.
업로드 하고 페이지에 노출하는 형태라면 서버단에서 저장할 때, 처리하면 되지만 업로드 뷰어의 경우에는 스크립트단에서 해결이 필요하였습니다.
스크립트 라이브러리 중 Load-Image의 힘을 빌려 해결하였습니다.
github.com/blueimp/JavaScript-Load-Image#image-loading
blueimp/JavaScript-Load-Image
Load images provided as File or Blob objects or via URL. Retrieve an optionally scaled, cropped or rotated HTML img or canvas element. Use methods to parse image metadata to extract IPTC and Exif t...
github.com
위 github에서 라이브러리를 받을 수 있습니다.
EXIF
디지털 카메라와 스마트폰등에서 이미지 등의 정보를 기록할 수 있습니다.
해당 메타정보 중에 회전 방향 옵션을 받아올 수 있는데 이 회전 방향값인 orientation을 추출하고 처리하여 강제로 고정시키는 방식입니다.
단순하게 업로드 한 데이터에서는 회전정보를 알 수가 없다보니 blob을 통해 바이너리 데이터로 변환하여 데이터를 확인하는 절차를 따른다고 합니다.
Load-Image
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="./load_image/load-image.all.min.js"></script> <body> <input type="file" id="upload"> <img src="" alt="" id="preview" style="width:300px;height:300px;"> </body> </html>javascript
$(function () { $("#upload").on("change", function (e) { var files = e.target.files; var fileType = files[0].type; var limg = loadImage(files[0], function (img, data) { img.toBlob(function (blob) { var rotateFile = new File([blob], files[0].name, { type: fileType }); var reader = new FileReader(); reader.onload = function (e) { $("#preview").attr("src", e.target.result); } reader.readAsDataURL(rotateFile); }, fileType) }, { orientation: 1 }); }); })file 태그에 이미지가 올라가면 change이벤트에 의해 파일 정보를 받아오고 라이브러리 함수 loadImage를 통해 데이터를 blob으로 읽고 image태그에 처리를 해줍니다.
여기서 포인트는 2번째 파라미터 object값에 orientation값을 1로 해주면 세로 이미지로 볼 수 있었습니다.
여기서 값을 2로 처리하시면 좌우 반전되어 나오는 것을 볼 수 있습니다.
처리 동작 후 미리보기 이미지가 정상적인 회전으로 나옵니다.
자바스크립트 이미지 회전
조회수 1122회javascript html5
html5에서 js로 이미지를 회전 시키는 함수를 구현하고 있습니다. prompt로 각도를 입력받는 만큼 이미지를 회전시키려고 하는데 사용한 변수는 아래와 같습니다.
outImgArr[][] // 원본 이미지 tarr[][] // 출력할 이미지 배열 oldheight, oldwidth //원본의 너비/높이 newheight, newwidth //출력 이미지의 너비/높이 cnewheight, cNewWidth //출력이미지 너비/높이의 반값 rad //입력할 각도를 라디안으로 바꾼 값 alpha // (oldheight,oldwidth)점과 x축과의 각도 beta // sqrt(oldheight**2 + oldwidth**2) 빗변의 길이tarr를 초기화 시킨 후,
위와 같이 새로운 높이,너비를 구했습니다.
for (var i = 0; i < oldHeight; i++) { for (var j = 0; j < oldWidth; j++) { var h= parseInt((i-cnewheight)*Math.cos(rad)-(j-cNewWidth)*Math.sin(rad)+oldheight/2); var w= parseInt((i-cnewheight)*Math.cos(rad)+(j-cNewWidth)*Math.sin(rad)+oldwidth/2); if((0<=h&& h<oldheight) && (0<=w&& w<oldwidth)){ tarr[i][j] = outImgArr[h][w]; } } }그리고 위와 같이 이중for문을 통해 tarr에 새로운 값을 넣었습니다. 예상대로라면 회전시킨 이미지가 정사각형으로 나와서 끝 부분이 잘리지 않아야 하는데 결과는 잘려서 나옵니다..
왜 그런 건지 알려주시면 감사하겠습니다.
원본
결과
- dh jung 80 points2021-03-24 15:44:36에 작성됨
답변을 하려면 로그인이 필요합니다.
Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.
(ಠ_ಠ)
(ಠ‿ಠ)