php - programacion - ¿Cuál es la mejor práctica para exportar lienzos con imágenes de alta calidad?

manual de programacion android pdf

Question

Necesito tu ayuda. Explico mi situación: uso la biblioteca fabric.js para colocar formas, texto, etc. en mi aplicación. Mi tamaño de lienzo tiene 1000x1000 píxeles (alrededor de 26,45x26,45 centímetros). Tengo un script de carga de imágenes solo para subir imágenes en alta calidad, como 300 ppp.

Básicamente lo que hago es lo siguiente: dibujar el lienzo (cargar imágenes, poner texto, etc ...); - cambiar el tamaño del lienzo multiplicando por factor de escala para poder tener al final una imagen con 300dpi; - guardar el lienzo en formato PNG; - utilizando php / ajax e Imagick, coloque el lienzo con una calidad de 300 ppp, guardando en formato jpg.

El problema es que cuando guardo el lienzo, la calidad de las imágenes cargadas decrecerá, porque el tamaño del lienzo fue de 72 ppp (en el momento en que guardo en PNG).

Creo que una posible solución es: cuando cargue las imágenes, guarde la posición en una matriz con la posición y el tamaño xey, hasta el final de todo el proceso, reemplace la imagen en JPG. Si esta es la mejor manera, es posible hacerlo con la biblioteca Imagick o en PHP?

Me gustaría saber tu opinión al respecto.

Gracias.

Answer 1

El DPI no importa en absoluto cuando se trata de imágenes. Las imágenes se miden en píxeles, por lo que esto es lo que necesita ajustar. Puede ignorar con seguridad el DPI ya que no tiene sentido en este contexto.

El escalado no lo ayudará aquí; recuerde que está trabajando con un dispositivo de píxeles, no con vectores, por lo que el lienzo debe tener el tamaño que desea usar para imprimir, etc. o tendrá una calidad reducida debido a la interpolación cuando lo escale .

Así es cómo:

Debe precalcular el tamaño de su lienzo en píxeles en relación con el tamaño que desea en la etapa final.

Digamos que quiere imprimir una imagen de 15 x 10 cm (o aproximadamente 6 x 4 pulgadas) @ 300DPI de salida. A continuación, calcule los píxeles:

Width : 10 cm * 300 / 2.54 = 1181 pixels
Height: 15 cm * 300 / 2.54 = 1772 pixels

Para pulgadas simplemente multiplique con el DPI ( 4 in! = 10 cm, por lo que un resultado un poco diferente, los números elegidos por simplicidad ):

Width : 4 in * 300 = 1200 pixels
Height: 6 in * 300 = 1800 pixels

Para su imagen a 26.45 cm @ 300 DPI, el lienzo debería ser:

26.45 cm * 300 DPI / 2.54 inches = 3124 pixels.

Para mostrar ese lienzo en un área más pequeña en la pantalla, usa CSS para mostrar el elemento, por ejemplo -

<canvas width="3124" height="3124" style="width:600px;height:600px;"></canvas>

Ahora puede dibujar en el lienzo en su posición de píxel real y se mostrará escalado hacia abajo en la pantalla (pero retendrá toda la información en el lienzo). Si usa las coordenadas del mouse, simplemente escala la posición del mouse proporcionalmente (canvas pos = mouse coord * 3124px / 600px).

Para hacer zoom, etc., se vuelve un poco más complicado, pero el principio permanece: el tamaño final de la imagen debe ser el del resultado final.

Acerca de DPI: si esta imagen fuera de 72 DPI o 300 DPI, el número de píxeles sería exactamente el mismo. La razón, como ya se mencionó, es que las imágenes se miden en píxeles.

DPI es un valor arbitrario cuando se trata de dispositivos de píxeles (mapas de bits, monitores, cámaras, etc.) y solo se usa para un software DTP para obtener una sugerencia sobre la dimensión para la impresión final que utilizará esta información solo para escalar previamente la imagen en relación con la página que usa para configurar la impresión.