Organize o documento, procure um código de instância para H5 para ligar para a câmera para tirar fotos e compactar a imagem e resolver e simplificá -la.
fundoRecentemente, quero fazer uma página H5.
Os principais pontos de função do front -end são:
A maneira mais fácil de ligar para a câmera é usar a propriedade de arquivo de entrada [câmera]:
<Tipo de entrada = Captura do arquivo = carera aceit =*> // câmera <type de entrada = arquivo aceit = imagem/*> // álbum
Essa compatibilidade com o método ainda é problemática. Eu procurei muitas soluções boas na internet e só podia continuar escrevendo. Essência Essência
Compressão da imagem A compactação de imagem é usada para usar FileReader e <canvas> .
O objeto FileReader permite que os aplicativos da Web leiam o conteúdo do arquivo armazenado no computador de forma assíncrona e use o arquivo ou objeto BLOB para especificar o arquivo ou os dados que você deseja ler.
<Canvas> é um elemento HTML que pode usar scripts para desenhar gráficos, que podem desenhar gráficos e animações simples.
A compactação de imagem deve comprimir a resolução e a qualidade da figura. da imagem.
Var max_wh = 800; Imagem .Height = max_wh;} if (image.width> max_wh) {// largura e outras proporções de zoom *= image.Height *= max_wh/ image.width; / DATAURL obtido através do FileRereaderDepois, há a qualidade da compactação da imagem. Crie dinamicamente uma etiqueta <Canvas> e compacte a imagem:
Var Quality = 80; , 0, imagem.width, imagem.Height);
Em seguida, o resultado do upload para o servidor e exibir o servidor, mas as coisas não são tão suaves. Essência Essência Depois que o telefone celular do iOS é compactado, a imagem é inexplicavelmente girada e continua a resolver o problema.
Resolva a rotação da imagem do iOSPrimeira citação exif.js, e obtenha as informações de direção da foto através do Exif.getData e Exif.gettg.
// arquivo obtém exif.getData (arquivo, function () {orientação = exif.gettg (arquivo, 'orientação');});O significado de cada valor de orientação corresponde ao telefone celular do iPhone para tirar fotos:
| Orientação | descrever |
|---|---|
| 3 | O tiro de tela horizontal do iPhone, neste momento o botão home fica à esquerda, a imagem gira 180 graus em comparação com a posição original |
| 6 | O iPhone atira verticalmente, neste momento o botão home está abaixo (a direção do telefone celular) e a imagem pode girar 90 graus em comparação com a posição original. |
| 8 | O iPhone fotografa a tela vertical, neste momento o botão home está acima e a imagem gira 90 graus no sentido horário em comparação com a posição original. |
Switch (Orientação) {Caso 6: Caso 8: cvs.width = altura; Neste momento, as teclas de casa no caso 3: // 180 graus no contexto de giro esquerdo. Pegue a direção do telefone celular): context.rotate (0,5 * Math.pi); 8: // Tempo inverso girando 90 graus de contexto.rotate (-0,5 * Math.pi);Em seguida, envie a imagem e descobri que a imagem no iOS é normal.
O código completo é fornecido abaixo:
$ ('entrada [tipo = arquivo]'). /I.test (file.type) {exif.getdata (arquivo, function () {orientação = exif.gettag (arquivo, 'orientação');}); max_wh = 800; Image.head = max_wh;} if (imagens.width> max_wh) {// largura e outras proporções são ampliadas *= image.Height *= max_wh / image.width; 80; .Height = Width; 180 graus para a esquerda girada. do telefone. Context.rotate (-0,5 * Math.pi); Imagem/jpeg ', pergunta/100); )}});O acima é todo o conteúdo deste artigo.