Obtenga más información sobre cómo resolver el problema del dibujo en lienzo borroso en dispositivos móviles

Debido a algunas razones de compatibilidad móvil, uno de nuestros proyectos requiere que el front-end convierta PDF en una interfaz que se pueda ver directamente en la página móvil. Para facilitar la solución, utilizamos el complemento pdf.js, que puede convertir un pdf en un lienzo y dibujarlo en la página. Sin embargo, durante el proceso de prueba, se descubrió que en el navegador móvil, el contenido dibujado estaba muy borroso (como se muestra a continuación, se descubrió que esto se debía a la pantalla de alta definición del terminal móvil). Después de resolver el problema, escriba las razones y los hallazgos por escrito.

Antes de explicar el problema, primero debe comprender algunos conocimientos básicos sobre la visualización móvil y los cavans para facilitar una mayor exploración. Si quieres ver los resultados directamente, puedes desplazarte hasta el final.

Los píxeles físicos también se denominan píxeles del dispositivo. A menudo escuchamos que la resolución de los teléfonos móviles es de píxeles físicos. Por ejemplo, la resolución física del iPhone 7 es 750 * 1334. La pantalla está compuesta de píxeles, lo que significa que la pantalla tiene 750 píxeles en dirección horizontal y 1334 píxeles en dirección vertical.

También llamados píxeles lógicos, por ejemplo, los tamaños de Iphone4 y Iphone3GS son ambos de 3,5 pulgadas. La resolución física del iphone4 es 640 * 980, mientras que 3gs es solo 320 * 480. Si dibujamos una imagen con un ancho de 320px según el tamaño. Diseño real, en el iphone4 Solo la mitad de la pantalla tiene contenido y la mitad restante está en blanco. Para evitar este problema, introdujimos píxeles lógicos y configuramos los píxeles lógicos de ambos teléfonos móviles en 320 px para facilitar el dibujo.

Los píxeles independientes del dispositivo anterior son, en última instancia, para facilitar el cálculo. Hemos unificado los píxeles lógicos del dispositivo, pero los píxeles físicos representados por cada píxel lógico no son seguros para determinar la relación entre los píxeles físicos y los píxeles lógicos sin escala. , presentamos el concepto de relación de píxeles del dispositivo (DPR)

 Relación de píxeles del dispositivo = píxeles del dispositivo / píxeles lógicos DPR = DP / DIP

Hay muchas teorías mencionadas anteriormente. Aquí hay una imagen para explicar.

Como puede verse en la figura anterior, con el mismo tamaño de píxeles lógicos, una pantalla de alta definición tiene más píxeles físicos. En una pantalla normal, 1 píxel lógico corresponde a 1 píxel físico, mientras que en una pantalla de alta definición con dpr = 2, 1 píxel lógico se compone de 4 píxeles físicos. Ésta es también la razón por la que las pantallas de alta definición son más delicadas.

Este es un punto de conocimiento que todos los que conocen Canvas deberían conocer, y también es el núcleo del problema que analizaremos a continuación.

Dejaremos la explicación de los mapas de bits más adelante. Ahora solo necesitamos saber que la imagen dibujada por lienzo es un mapa de bits.

Los atributos de ancho y alto del lienzo son muy fáciles de cometer para los principiantes. Estas dos propiedades a menudo se confunden con las propiedades de ancho y alto en CSS.

Por ejemplo, tenemos el siguiente código (1):

 <ancho del lienzo=600 alto=300 estilo=ancho: 300px alto: 150px></canvas>; 

• El ancho y el alto en el estilo representan respectivamente el ancho y el alto ocupados por el elemento de lienzo en la interfaz, es decir, el ancho y el alto en el estilo.
• El ancho y el alto en el atributo representan el ancho y el alto de los píxeles reales del lienzo.

Si aún no puedes entenderlo, puedes imaginarlo como el siguiente código (2):

 <!-- Los píxeles de logo.png son 600 * 300 --><img style=width: 300px height: 150px src=logo.png />

El ancho y alto predeterminados del lienzo son 300 * 150. Después de configurar el CSS, el lienzo se escalará (tenga en cuenta que no se recortará) de acuerdo con el ancho y alto del CSS establecidos , que es lo mismo que la etiqueta img.

El código anterior (1) en realidad se puede explicar de una manera más popular, es decir, un píxel lógico en realidad está lleno de dos píxeles del lienzo.

Lo anterior es una introducción a algunos conocimientos básicos necesarios, y la exploración formal comenzará a continuación.

En primer lugar, mencionamos que usar lienzo para dibujar imágenes es un mapa de bits, y los jpg y png que usamos habitualmente también son mapas de bits. Entonces, ¿qué es un mapa de bits?

El mapa de bits, también llamado mapa de píxeles o mapa ráster, almacena y muestra imágenes registrando el color, la profundidad, la transparencia y otra información de cada punto de la imagen. Para decirlo de manera más concreta, puedes pensar en un mapa de bits como un enorme rompecabezas. Este rompecabezas tiene innumerables piezas y cada pieza representa un píxel de color sólido. En teoría, un píxel de mapa de bits corresponde a un píxel físico . Pero ¿qué pasa si usas una pantalla de alta definición, como la pantalla Retina de Apple, para ver una imagen?

Supongamos que tenemos el siguiente código, que se mostrará en la pantalla retina del iPhone 4:

 <ancho del lienzo=320 alto=150 estilo=ancho: 320px alto: 150px></canvas>

Los píxeles físicos del iPhone 4 son 640 * 980, mientras que los píxeles independientes del dispositivo son 320 * 480, lo que significa que 1 píxel CSS en realidad está compuesto por 4 píxeles físicos. Los píxeles del lienzo son 320 * 150 y sus píxeles CSS son. 320 * 150. Significa que un píxel CSS estará compuesto por un elemento de lienzo, por lo que la conversión se realiza así: En una pantalla retina, un píxel de lienzo (o un píxel de mapa de bits) llenará 4 píxeles físicos. Dado que un solo píxel de mapa de bits no se puede dividir más, solo puede tomar el color más cercano, lo que hace que la imagen se vea borrosa.

Si todavía está confundido, la siguiente imagen puede ilustrar cómo se llena el mapa de bits en la pantalla retina:

El lado izquierdo de la imagen de arriba muestra las reglas de visualización en una pantalla normal. Se puede ver que hay 4 píxeles de mapa de bits, mientras que la pantalla de alta definición de la derecha tiene 16 píxeles. Como los píxeles no se pueden cortar, el color cambia.

Pero una cosa que no se ha explicado claramente es por qué la imagen toma el color más cercano en lugar de tomar el valor original directamente. Este también es el culpable del desenfoque.

Lo siguiente es lo que uno de mis compañeros de último año me ayudó a explicar. Hace un momento dijimos que cada elemento de mapa de bits es en realidad un píxel de color sólido. Ahora supongamos que necesitamos dibujar un número 0 en una pantalla normal con un tamaño CSS de 4px * 4px y un dpr de 1. Entonces lo que dibujamos debería verse como la siguiente imagen, donde 1 representa píxeles negros y 0 representa píxeles blancos.

Se puede ver que cuando el dpr es relativamente pequeño, nuestro patrón 0 sigue siendo relativamente obvio. Ahora, si nuestro tamaño CSS permanece sin cambios, pero la imagen se dibuja en la pantalla retina, ¿cómo será el efecto?

Sabemos que debajo de la pantalla de retina, un píxel CSS representa 4 píxeles físicos. Si no realizamos ningún procesamiento, lo organizamos directamente de acuerdo con la matriz anterior y expandimos la matriz, encontraremos que debajo de la pantalla de retina, nuestro patrón tiene un. sensación irregular muy obvia. La imagen claramente carece de un toque de Hue.

Si cambiamos ligeramente la imagen, cámbiela a la siguiente imagen.

La imagen se siente instantáneamente más suave, pero el lugar que debería haberse llenado con 4 0 se ha convertido en 3 1 más 1 0. En realidad, este es el llamado proceso de suavizado de imágenes. Para resolver la sensación irregular, se cambia el color original en las imágenes llenas de más colores, para que sean más naturales, las uniones de las imágenes se vuelven colores aproximados. explica por qué Al rellenar el color anterior, no se utiliza el color original sino el color aproximado.

Después de pasar la explicación anterior, resumamos ahora las siguientes conclusiones. Ahora que los terminales móviles son populares y las pantallas de alta definición básicamente se han vuelto populares, un píxel CSS de 1 px en realidad representa 4 o más píxeles físicos. Sin embargo, debido a nuestro problema de código, nuestro píxel CSS de 1 px y 1 píxel del lienzo son iguales, lo que da como resultado que 1 píxel del lienzo en realidad deba llenarse con 4 o más píxeles físicos para garantizar un procesamiento fluido de la imagen, el relleno El físico restante. Los píxeles utilizan una aproximación del color original, lo que da como resultado una imagen borrosa.

Una vez que comprenda la causa del problema, será fácil resolverlo. Lo más importante para resolver el problema es ecualizar un píxel del lienzo y un píxel físico.

Hay un atributo devicePixelRatio colgado debajo del objeto de ventana de los navegadores de versiones superiores, que es el dpr mencionado anteriormente.

Cuando se determina el ancho y alto del elemento de lienzo CSS, podemos hacer esto

 let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');let dpr = window.devicePixelRatio; // Supongamos que dpr es 2// Obtenga el ancho y alto de css let { width: cssWidth, altura: cssHeight } = canvas.getBoundingClientRect();// Según dpr, expanda los píxeles del lienzo de modo que un píxel del lienzo sea igual a un píxel físico canvas.width = dpr * cssWidth; canvas.height = dpr * cssHeight // A medida que el lienzo se expande, el sistema de coordenadas del el lienzo también se expande. Si el contenido del dibujo se basa en el sistema de coordenadas original, el contenido se reducirá // por lo que es necesario ampliar la escala del dibujo ctx.scale(dpr,dpr);

Muchas veces, cuando encontramos un problema, no podemos concentrarnos en resolverlo, sino que debemos comprender profundamente la causa del problema para poder avanzar mejor.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.