Organice el documento, busque un código de instancia para que H5 llame a la cámara para tomar fotos y comprimir la imagen, y ordenarlo y agilizarlo.
fondoRecientemente, quiero hacer una página H5.
Los principales puntos de función de la parte delantera son:
La forma más fácil de llamar a la cámara es usar la propiedad del archivo de entrada [cámara]:
<Entrada tipo = file capture = carera aceptación = imagen/*> // cámara <input type = file aceptación = imagen/*> // Álbum
Esta compatibilidad del método sigue siendo problemática. Busqué muchas buenas soluciones en Internet, y solo pude continuar escribiendo. Esencia Esencia
Compresión de imagen La compresión de la imagen se usa para usar FileReader y <canvas> .
El objeto FileReader permite que las aplicaciones web lean el contenido del archivo almacenado en la computadora de manera asincrónica, y use el archivo o objeto blob para especificar el archivo o los datos que desea leer.
<VAnvas> es un elemento HTML que puede usar scripts para dibujar gráficos, que pueden dibujar gráficos y animaciones simples.
La compresión de la imagen debe comprimir la resolución y la calidad de la imagen. de la imagen.
Var max_wh = 800; ; / DataUrl obtenido a través de FileReader
Luego está la calidad de comprimir la imagen. Crear dinámicamente una etiqueta <Canvas> y luego comprimir la imagen:
VAR QUIE = 80; , 0, Image.Width, Image.Height);
Luego, el resultado de cargar al servidor y mostrar el servidor, pero las cosas no son tan suaves. Esencia Esencia Una vez comprimido el teléfono móvil iOS, la imagen se gira inexplicablemente y continúa resolviendo el problema.
Resolver la rotación de imágenes de iOSPrimera cotización exif.js y obtenga la información de dirección de la foto a través de exif.getData y exif.gettg.
// File Obtener exif.getData (archivo, function () {orientation = exif.gettg (archivo, 'orientación');});El significado de cada valor de orientación corresponde al teléfono móvil de iPhone para tomar fotos:
| Orientación | describir |
|---|---|
| 3 | Disparo de pantalla horizontal de iPhone, en este momento el botón de inicio está a la izquierda, la imagen gira 180 grados en comparación con la posición original |
| 6 | El iPhone se dispara verticalmente, en este momento el botón de inicio está debajo (la dirección del teléfono móvil), y la imagen puede girar 90 grados en comparación con la posición original. |
| 8 | iPhone dispara la pantalla vertical, en este momento el botón de inicio está arriba, y la imagen gira 90 grados en el sentido de las agujas del reloj en comparación con la posición original. |
Switch (Orientación) {Caso 6: Caso 8: Cvs.Width = Height; En este momento, las claves en el caso de la izquierda 3: // 180 grados al contexto de rotación izquierda. Tome la dirección del teléfono móvil) Caso 6: context.rotate (0.5 * Math.pi); 8: // tiempo inverso rotativo 90 grados context.rotate (-0.5 * Math.pi);Luego suba la imagen y descubra que la imagen en iOS es normal.
El código completo se proporciona a continuación:
$ ('input [type = file]'). /I.test (file.type) {exif.getData (archivo, function () {orientation = exif.gettag (archivo, 'orientación');}); max_wh = 800; ; Image.head = max_wh;} if (images.width> max_wh) {// ancho y otras proporciones están zoom *= image.height *= max_wh / image.width; 80; .Height = Width; 180 grados a la izquierda rota conectada. Translato (ancho, altura); del teléfono. Contexto en sentido antihorario.rotate (-0.5 * Math.pi); Image/jpeg ', pregunta/100); )}});Lo anterior es todo el contenido de este artículo.