Prólogo: Recientemente hice un elemento móvil con imágenes de póster de lienzo. .
1. Mobile -End Canvas Adaptation Problema de pantalla completaDescripción del problema: Debido a que el ancho y la altura del lienzo solo pueden establecer los valores de PX y no admiten unidades REM, es difícil alcanzar el efecto de lienzo cubierto con pantallas completas cuando la resolución de la pantalla del dispositivo móvil es complicada. Solución: Obtenga el valor de ancho de cliente de la pantalla del teléfono móvil a través de JS y dale a los lienzos para lograr el efecto de adaptar la pantalla completa;
Var clientwidth = document.documentElement.clientwidth; px ');2. La imagen de la síntesis de lienzo parece fenómeno desenfoque
Descripción del problema: Hay un problema vago con las imágenes generadas por el lienzo, especialmente si hay códigos QR en la imagen, que deben reconocerse, los usuarios no pueden reconocerlo;
Solución: 1) Puede citar el complemento HIDPI-Canvas.js para resolver este problema;
2) También puede establecer los valores de ancho y altura en el estilo de lienzo para establecer el tamaño que desee, y luego aumentar el valor del ancho y la altura del lienzo respectivamente.
3. Cuando las imágenes sintéticas son sintéticas, algunas imágenes del modelo son caóticasDescripción del problema: cuando algunos teléfonos Android exportan la imagen Base64 del lienzo, solo pueden mostrar la mitad de la imagen del efecto del efecto.
Solución: Obtenga la relación de Pixel del equipo, juzga el modelo. tamaño original.
// Hidpi-Canvas amplía los atributos de ancho y altura del lienzo.4. La imagen de carga del teléfono móvil del iPhone tiene un problema de rotación
Descripción del problema: durante la prueba, se descubrió que el teléfono móvil de iPhone cargó fotos de la rotación, y la imagen cargada desde Internet no ocurrirá, y Android es normal.
Solución: Este problema se puede resolver utilizando el complemento exif.js.
Var file = $ (this) [0] .files [0]; ) ;;5. El lienzo dibuja imágenes de dominio cruzado y no puede exportar base64 imágenes
Descripción del problema: cuando hay imágenes de solicitudes de dominio cruzado en el lienzo, la imagen de salida base64 falla.
SOLUCIÓN: Este error debe resolverse con la parte posterior y la parte posterior.
Var pageqrCodeImg = QrCodeCanVas.Todaurl ('image/jpg'); 6. La pantalla blanca aparecerá al dibujar imágenes de lienzoDescripción del problema: La situación de la pantalla blanca ocasionalmente aparece cuando el lienzo dibuja una imagen.
Solución: Agregue la función de encendido a IMG y luego realice la operación de dibujo después de leer la imagen.
qrcodeimg.onload = function () {// dibujar una imagen} 7, WeChat Browser, Long Presione la imagen, no se puede guardarDescripción del problema: La imagen generada por el lienzo no se puede guardar o reconocer el código QR en el navegador WeChat.
Solución: comprime la calidad de la imagen al exportar la imagen Base64.
var mycanvas = document.getElementById (main);
Postscript: Los problemas actuales encontrados son básicamente estos.
Lo anterior es todo el contenido de este artículo.