Traduzido do 日本語 • Ver 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; }
Outro dia, quando criei um site usando o plugin de galeria "Nextgen Gallery" no WordPress, o problema que tive dificuldade para lidar foi o caso do título.
Especificamente, quando uma imagem tirada em um dispositivo iOS, como iPhone ou iPad, é enviada, quando a imagem enviada é exibida em um navegador diferente do Safari (que é padrão no iOS), ela é rotacionada em uma direção não intencional.
A razão é que as fotos tiradas com iOS recebem um Exif dedicado (meta-informação do estado da filmagem dada à foto), e mesmo que o dispositivo seja tirado em orientação retrato, o Exif é usado para otimizar quando visualizado em horizontal. Ao visualizar uma foto tirada em um dispositivo iOS como em um dispositivo iOS, o dispositivo interpreta automaticamente o Exif, então ela é exibida sem problemas, mas se a imagem for exibida em um dispositivo que não seja iOS (PC ou Android), ela pode girar em uma direção não intencional e não pode ser exibida normalmente.
Na verdade, a orientação da imagem capturada e a orientação quando visualizada em outros dispositivos após o upload é a seguinte.
| Orientação do dispositivo durante a filmagem | Orientação | Como corrigir correções |
|---|---|---|
| ↑ |
| 6(Gire 90 CW) | Gire 90° no sentido horário | |
↑
| 8(Gire 270 CW) | Gire 180° no sentido horário | |
↑
| 3(Girar 180) | Girar 90° no sentido anti-horário | |
↑
| 1(Horizontal (normal)) | Não gire (mostre como está) |
- O método de correção é corrigir o plugin "NextGen Gallery" do WordPress (ao usar o ImageMagick).
A resposta real é girar a imagem com base no valor de orientação conforme a tabela acima quando a imagem for enviada, e excluir as informações Exif para que não cause danos em um dispositivo específico.
Além disso, em 25 de março de 2013, havia um bug fundamental na parte do comando imagemagick da biblioteca ImageMagick "lib/imagemagick.inc.php" no plugin da versão mais recente do "NextGen Gallery 1.9.12", e o comando convert não estava funcionando corretamente.
Especificamente, a ordem em que os comandos do ImageMagick são escritos deve ser executada no formato "convert (comando de processamento de imagem) (nome original do arquivo de imagem) (nome do arquivo de processamento de imagem)", mas a ordem de descrição na biblioteca correspondente (classe) é "convert (nome original do arquivo de imagem) (comando de processamento de imagem) (nome do arquivo de processamento de imagem)". Portanto, mesmo que você defina o ImageMagick como a biblioteca de imagens no painel de administração do WordPress, a imagem não será processada e será registrada ou exibida.
Portanto, desta vez, tentei modificar a imagem tirada e enviada no iOS para que ela fosse exibida normalmente em todos os clientes, enquanto normalizava esse comando, então deixarei o procedimento como conhecimento.
Primeiro, o processo de rotação de imagens "lib/imagemagick.inc.php" é otimizado para imagens tiradas no iOS.
[php firstline="374"] função rotateImage($dir = 'CW') { if($dir == 'CW'){ $angle = 90; } else if($dir == 'CCW'){ $angle = -90; } else if((int)$dir == 180){ $angle = 180; } else{ $angle = ''; } if(!vazia($angle)){ if(strpos($this->imageMagickExec, '-strip') === false){ $this->imageMagickExec .= ' -gire "'. $angle .' >" '; $this->imageMagickExec .= '-tira'; } } $newWidth = $this->DimensõesCorrentes['altura']; $newHeight = $this->DimensõesCorrentes['largura']; $this->DimensõesCorrente['largura'] = $newWidth; $this->DimensõesCorrente['altura'] = $newHeight; } [/php] *A opção "-strip" do ImageMagick pode excluir as informações Exif da imagem.
Em seguida, modifique a ordem em que o processo que gera o comando convert é descrito.
[php firstline="584"] função mostrar( $quality = 85, $name = '') { //salve a imagem se obtivermos um nome de arquivo if( $name !' = '' ) { $args = "{$this->imageMagickBefore} "; $args .= " $this->imageMagickExec $this->imageMagickComp -qualidade '$quality'"; $args .= escapeshellarg("$this->nomeFileName"); $args .= ' ' . escapeshellarg("$name"); $args = "{$this->imageMagickBefore} '$this->nomeFileName' $this->imageMagickExec $this->imageMagickComp -qualidade $quality '$name'"; $this->execute('converte', $args); $this->erro = true; } else { //return a raw image stream $args = "{$this->imageMagickBefore} $this->imageMagickExec $this->imageMagickComp -qualidade $quality JPG:- '$this->nomedo do arquivo'"; //$args = "{$this->imageMagickBefore} '$this->nomeArquivo' $this->imageMagickExec $this->imageMagickComp -qualidade $quality JPG:-"; $this->execute('convert', $args, true); $this->erro = true; } } [/php] Agora, imagens tiradas em dispositivos iOS serão exibidas na orientação normal em qualquer dispositivo.