Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

foto que vem da camera fica rotacionada

por Diogo Gomes de Ataides
| 400.8k xp | 20 posts

A dúvida não é de um curso em específico, mas sim algo que tentei fazer... Usando React verifico o desenvolvimento do site no meu celular... Até aí tudo certo, porém, tentei fazer o upload de uma imagem com:

<input 
        onChange={this.mostra} 
        type="file" 
        accept="image/jpeg" 
        name="img" 
        id="perfilfoto"/>

E uso essa função para mostrar a imagem na tela antes de ser enviada ao backend:

mostra = ()=> {

            var doc = document.querySelector("#perfilfoto");

            let fread = new FileReader();
            fread.readAsDataURL(doc.files[0]);

            fread.onloadend = event => {
                this.setState({url: ""});
                this.setState({fat: event.target.result});
            }
        }

Procurei um pouco e cheguei a isso:

mostra = ()=> { 
let doc = document.querySelector("#perfilfoto")
let fread = new FileReader()

fread.onloadend = event => {
let photoExif = event.target.result

let dataURL =
`data:${ doc.files[0].type };base64,${ 
btoa( 
    photoExif.match(/Orientation>3/)? photoExif.replace(/Orientation>3/, 'Orientation>1')
  : photoExif.match(/Orientation>6/)? photoExif.replace(/Orientation>6/, 'Orientation>8')
  : photoExif
) }`;

this.setState({ url: '' })
this.setState({ fat: dataURL })
}

fread.readAsBinaryString( doc.files[0] )
}

Porém, a imagem continua rotacionada... Se puderem me mostrar o erro ou indicar um norte, agradeço desde já a atenção...

3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Diogo, tudo bem? Fiquei um pouco na dúvida:

A foto já está salva de maneira rotacionada ou quando você está mostrando ela no preview que está aparecendo rotacionada?

Fico no aguardo.

por Diogo Gomes de Ataides
| 400.8k xp | 20 posts

Tanto quanto eu mostro ela no preview como quando eu salvo no backend (com node) ela fica rotacionada, ent com isso cheguei a conclusao que o problema é no front, mas posso estar enganado também...

Porque eu uso o evento de "onchange" pra mostrar a foto que ele escolheu, depois tem outro botao usado para enviar, em que eu faço uma requisição ajax para salvar e como resposta recebo a url

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Pode ser no front-end sim, em todo caso, não sei porque está fazendo esse btoa e tals.

Se você quer pegar a imagem e mostrar o preview na tela antes de mandar para o back-end, você pode fazer com o URL.createObjectURL.

Seria algo mais ou menos assim:

import React, { useRef, useState } from 'react'

const App = () => {
    const [previewUrl, updatePreviewUrl] = useState('')
    const inputRef = useRef()

    const handleChange = event => {
        if (inputRef && inputRef.current) {
            const { current: inputElement } = inputRef
            updatePreviewUrl(URL.createObjectURL(inputElement.files[0]))
        }
    }

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column'
        }}>
            <input ref={inputRef} onChange={handleChange} type="file"/>
            { previewUrl && <img alt="Preview imagem" src={previewUrl} style={{ objectFit: 'cover', width: '100%' }}/> }
        </div>
    )
}

export default App

Faça o teste e vamos ver o que rola.

Espero ter ajudado.