日本語에서 번역 • 원문 보기 .iphone { position: relative; height: 123.75px; width: 62.5px; border-radius: 8.75px; margin: 12.5px auto; background: -webkit-linear-gradient(-165deg, rgba(255,255,255,0.4), rgba(255,255,255,0.15) 35%, transparent 35%), -webkit-linear-gradient(top, transparent 21.25px, #222222 21.25px, #151515 102.5px, transparent 102.5px), -webkit-linear-gradient(top, #000, #0a0a0a); background-repeat: no-repeat; background-size: 100% 100%, 55px 100%, 100% 100%; background-position: 0 0, 3.75px 0, 0 0; box-shadow: 0 0 0 0.75px black, -10px -32px 0 -30.75px black, 0 0 0 1.25px #a09f9d, 12.25px -32.5px 0.75px -30.75px #777, 11.5px -32.5px 0.5px -30.75px #ddd, 15.5px -27.75px 0 -26.25px #8e8d8b, 15.5px -28px 0 -26.25px #b4b3b1, 15.5px -28.25px 0 -26.25px #666; } .iphone:after { content: '▢'; line-height: 11.5px; text-align: center; font-size: 7px; color: #666; position: absolute; width: 11.5px; height: 11.5px; border-radius: 50%; background: white; bottom: 4.5px; left: 25px; border: 0.5px solid #0a0a0a; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.85), black); box-shadow: -9.75px -102.5px 0 -5.75px #000f31, -9.75px -102.5px 0 -5.5px #0a1c5a, -10px -102.5px 0 -5.25px #0d1216, -10px -102.5px 0 -4.75px #1b191a, -3px -102.5px 0 -5.5px #333, -2px -102.5px 0 -5.5px #333, -1px -102.5px 0 -5.5px #333, -0px -102.5px 0 -5.5px #333, 1px -102.5px 0 -5.5px #333, 2px -102.5px 0 -5.5px #333, 3px -102.5px 0 -5.5px #333, 4px -102.5px 0 -5.5px #333, 5px -102.5px 0 -5.5px #333, 6px -102.5px 0 -5.5px #333, -3px -102.5px 0 -4.5px #0a0a0a, -2.25px -102.5px 0 -4.5px #0a0a0a, -1.5px -102.5px 0 -4.5px #0a0a0a, -0.75px -102.5px 0 -4.5px #0a0a0a, 0px -102.5px 0 -4.5px #0a0a0a, 0.75px -102.5px 0 -4.5px #0a0a0a, 1.5px -102.5px 0 -4.5px #0a0a0a, 2.25px -102.5px 0 -4.5px #0a0a0a, 3px -102.5px 0 -4.5px #0a0a0a, 3.75px -102.5px 0 -4.5px #0a0a0a, 4.5px -102.5px 0 -4.5px #0a0a0a, 5.25px -102.5px 0 -4.5px #0a0a0a, 6px -102.5px 0 -4.5px #0a0a0a; } .iphone:before { position: absolute; content: ''; width: 0.5px; height: 29.25px; background: transparent; top: 10px; left: -1.75px; background-image: -webkit-linear-gradient(left, transparent 0px, transparent 0.25px, #7a7879 0.5px), -webkit-linear-gradient(top, #383838 0.25px, #b9b9b9 0.75px, #b9b9b9 2.5px, #383838 4.75px, #b9b9b9 5.75px, transparent 5.75px, transparent 13.25px, #383838 13.25px, #b9b9b9 13.5px, #dadada 14.5px, #383838 15.5px, black 15.5px, black 16.5px, #383838 16.5px, #b9b9b9 16.75px, #dadada 17px, #383838 17.5px, transparent 17.5px, transparent 25px, #383838 25px, #b9b9b9 25.25px, #dadada 26.25px, #383838 27.25px, black 27.25px, black 28.25px, #383838 28.25px, #b9b9b9 28.5px, #dadada 28.75px, #383838 29.25px); } .display { position: absolute; top: 21.75px; left: 2px; width: 56px; height: 80px; margin: 0; padding: auto; background: #fafafa; border: solid 1px #afafaf; font-size: 24px; font-weight: bold; line-height: 78px; text-align: center; vertical-align: middle; } .rotate_90deg { -moz-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); } .rotate_180deg { -moz-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); } .rotate_270deg { -moz-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); } .device_deg_list { margin: 1em auto 2em; padding: 0; background: #ffffff; border: solid 1px #999999; } .device_deg_list th { padding: 2px; background: #d0d0d0; font-weight: bold; } .device_deg_list td { text-align: center; vertical-align: middle; } .device_deg_list td.odd { background: #f0f0f0; } .device_deg_list td.visual { width: 160px; text-align: center; vertical-align: middle; } .device_deg_list td.orientation { min-width: 120px; } .device_deg_list td.resampling { min-width: 200px; } .exif-value{ clear: both; display: block; font-size: 9px; color: #808080; }
얼마 전, 워드프레스의 갤러리 플러그인 "Nextgen Gallery"를 사용해 웹사이트를 만들었는데, 제가 어려웠던 문제는 제목의 경우였습니다.
구체적으로, 아이폰이나 아이패드 같은 iOS 기기에서 촬영된 이미지를 업로드할 때, iOS의 표준 브라우저인 사파리가 아닌 브라우저에서 업로드될 때, 의도치 않은 방향으로 회전됩니다.
그 이유는 iOS에서 촬영된 사진이 전용 Exif(사진에 부여된 촬영 상태의 메타데이터)를 부여받기 때문이며, 기기가 세로 방향으로 촬영되더라도 가로 방향으로 볼 때 최적화를 위해 Exif가 제공되기 때문입니다. iOS 기기에서 찍은 사진을 iOS 기기에서 볼 때는 기기가 자동으로 Exif를 해석하여 문제없이 표시하지만, iOS가 아닌 다른 기기(PC 또는 안드로이드 기기)에서 이미지를 표시하면 의도치 않은 방향으로 회전하여 정상적으로 표시할 수 없습니다.
실제로 캡처된 이미지의 방향과 업로드 후 다른 기기에서 볼 때의 방향은 다음과 같습니다.
| 촬영 시 장치의 방향 | 방향 | 수정 방법 |
|---|---|---|
| ↑ |
| 6(90 CW 회전) | 시계 방향으로 90° 회전 | |
↑
| 8(270 CW 회전) | 시계 방향으로 180° 회전 | |
↑
| 3(180도 회전) | 반시계 방향으로 90° 회전 | |
↑
| 1(수평(일반)) | 회전하지 마세요 (있는 그대로 표시) |
- 수정 방법은 ImageMagick을 사용할 때 워드프레스의 "NextGen Gallery" 플러그인을 수정하는 것입니다.
실제 대응은 이미지 업로드 시 위 표에 따른 방향 값에 따라 이미지를 회전시키고, 특정 장치에 피해를 주지 않도록 Exif 정보를 삭제하는 것입니다.
또한 2013년 3월 25일 기준으로, 최신 버전의 "NextGen Gallery 1.9.12"의 플러그인 내 ImageMagick 라이브러리 "lib/imagemagick.inc.php" 내 imagemagick 명령어 부분에 근본적인 버그가 발생해 convert 명령어가 제대로 작동하지 않았습니다.
구체적으로, ImageMagick 명령어를 작성하는 순서는 "convert (image processing command) (original image file name) (image processing file name)" 형식으로 실행되어야 하지만, 해당 라이브러리(클래스)의 설명 순서는 "convert (original image file name) (image processing command) (image processing file name)"입니다. 따라서 WordPress 관리자 패널에서 이미지 라이브러리에 ImageMagick을 설정해도 이미지는 처리되지 않고 등록되거나 표시됩니다.
그래서 이번에는 iOS에서 촬영 및 업로드한 이미지를 모든 클라이언트에서 정상적으로 표시되도록 수정하고, 이 명령어를 정상화하여 절차를 지식으로 남겨두겠습니다.
첫째, "lib/imagemagick.inc.php"의 이미지 회전 과정은 iOS에서 촬영된 이미지에 최적화되어 있습니다.
[php firstline="374"] function rotateImage($dir = 'CW') { if($dir == 'CW'){ $angle = 90; } else if($dir == 'CCW'){ $angle = -90; } else if((int)$dir == 180){ $angle = 180; } else{ $angle = ''; } if(!empty($angle)){ if(strpos($this->imageMagickExec, '-strip') === false){ $this->imageMagickExec .= ' -rotate "'. $angle .' >" '; $this->imageMagickExec .= '-strip '; } } $newWidth = $this->currentDimensions['height']; $newHeight = $this->currentDimensions['width']; $this->currentDimensions['width'] = $newWidth; $this->currentDimensions['height'] = $newHeight; } [/php] *ImageMagick의 "-strip" 옵션은 이미지의 Exif 정보를 삭제할 수 있습니다.
다음으로, 변환 명령을 생성하는 프로세스의 순서를 수정합니다.
[php firstline="584"] 함수 show( $quality = 85, $name = '') { //파일 이름을 받으면 이미지를 저장하세요 if( $name !) = '' ) { $args = "{$this->imageMagickBefore} "; $args .= " $this->imageMagickExec $this->imageMagickComp -품질 '$quality' "; $args .= escapeshellarg("$this->fileName"); $args .= ' '. escapeshellarg("$name"); $args = "{$this->imageMagickBefore} '$this->fileName' $this->imageMagickExec $this->imageMagickComp -품질 $quality '$name'"; $this->execute('convert', $args); $this->error = true; } 그렇지 않으면 { //원본 이미지 스트림을 반환하세요 $args = "{$this->imageMagickBefore} $this->imageMagickExec $this->imageMagickComp -품질 $quality JPG:- '$this->fileName'"; //$args = "{$this->imageMagickBefore} '$this->fileName' $this->imageMagickExec $this->imageMagickComp -quality $quality JPG:-"; $this->execute('convert', $args, true); $this->error = true; } } [/php] 이제 iOS 기기에서 촬영된 이미지는 어떤 기기에서든 정상 방향으로 표시됩니다.