Translated from 日本語 • View original .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; }
The other day, when I built a website using the gallery plugin "Nextgen Gallery" in WordPress, the problem I had a hard time dealing with is the case of the title.
Specifically, when an image taken on an iOS device such as an iPhone or iPad is uploaded, when the uploaded image is displayed in a browser other than Safari (which is standard with iOS), it is rotated in an unintended direction.
The reason is that photos taken with iOS are given a dedicated Exif (meta information of the shooting state given to the photo), and even if the device is taken in portrait orientation, the Exif is given to optimize when viewed in landscape orientation. When viewing a photo taken on an iOS device as it is on an iOS device, the device automatically interprets the Exif, so it is displayed without any problems, but if the image is displayed on a device other than iOS (PC or Android device), it may rotate in an unintended direction and cannot be displayed normally.
In fact, the orientation of the captured image and the orientation when viewed on other devices after uploading is as follows.
| Device orientation when shooting | Orientation | How to Fix Corrections |
|---|---|---|
| ↑ |
| 6(Rotate 90 CW) | Rotate 90° clockwise | |
↑
| 8(Rotate 270 CW) | Rotate 180° clockwise | |
↑
| 3(Rotate 180) | Rotate 90° counterclockwise | |
↑
| 1(Horizontal (normal)) | Do not rotate (show as is) |
- The correction method is to correct the WordPress "NextGen Gallery" plugin (when using ImageMagick).
The actual response is to rotate the image based on the orientation value according to the table above when the image is uploaded, and delete the Exif information so that it does not cause harm on a specific device.
In addition, as of March 25, 2013, there was a fundamental bug in the imagemagick command part of the ImageMagick library "lib/imagemagick.inc.php" in the plugin of the latest version of "NextGen Gallery 1.9.12", and the convert command was not working properly.
Specifically, the command must be executed in the format "convert (image processing command) (original image file name) (image processing file name)" as the order in which the ImageMagick command is described, but the order of description in the corresponding library (class) is "convert (original image file name) (image processing command) (image processing file name)" It has become. So, even if you set ImageMagick to your image library in the WordPress admin panel, the image will not be processed and will be registered or displayed.
Therefore, this time, I tried to modify the image taken and uploaded on iOS so that it is displayed normally in all clients, while normalizing this command, so I will leave the procedure as knowledge.
First, the image rotation process of "lib/imagemagick.inc.php" is optimized for images taken on 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's "-strip" option can delete the Exif information of the image.
Next, modify the order in which the process that generates the convert command is described.
[php firstline="584"] function show( $quality = 85, $name = '') { //save the image if we get a filename if( $name != '' ) { $args = "{$this->imageMagickBefore} "; $args .= " $this->imageMagickExec $this->imageMagickComp -quality '$quality' "; $args .= escapeshellarg("$this->fileName"); $args .= ' ' . escapeshellarg("$name"); //$args = "{$this->imageMagickBefore} '$this->fileName' $this->imageMagickExec $this->imageMagickComp -quality $quality '$name'"; $this->execute('convert', $args); //$this->error = true; } else { //return a raw image stream $args = "{$this->imageMagickBefore} $this->imageMagickExec $this->imageMagickComp -quality $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] Now, images taken on iOS devices will be displayed in a normal orientation on any device.