mdn - drawimage c#

lienzo drawImage calidad

Question

Aquí hay una imagen .png (a la derecha) y el elemento del lienzo sobre el que dibujé la imagen (a la izquierda). ¿Se nota la diferencia de calidad? El lienzo renderiza la imagen con una notable pérdida de calidad. ¿Qué podemos hacer?

Observé este resultado en Chrome e IE9. Otros probablemente harán lo mismo. La forma en que renderizo la imagen es bastante habitual: en el script, creo un nuevo objeto Image() , después de cargarlo, llamo
context.drawImage(myimage, x, y);

EDITAR:

Esta es la imagen inicial que observé en el lienzo:

Y esto es lo que hace el lienzo después de que escribí:
context.drawImage(myimage,parseInt(x),parseInt(y));

Qué puedo decir, gran respuesta hombre. Sharpshooting en su mejor momento. El sombrero está apagado para ti.

EDIT2:

context.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5); , aquí está el resultado:

Creo que es peor que el primero. Observé esto en Chrome, en IE9 es algo así como malo.

Answer 1

Acabo de crear una superposición de ambas imágenes para que se neutralicen entre sí. No funcionó, tuve dificultades con los bordes.

Por favor verifica si tus coordenadas x, y son enteros. El uso del número de punto flotante aquí puede desenfocar su imagen, ya que algunas implementaciones intentan representarla "entre los píxeles"

context.drawImage(myimage, parseInt(x), parseInt(y));

Si esto tampoco funciona, intente usar el valor entero + 0.5
Sé que para las implementaciones de OpenGL, tienes que usar coordenadas con 0.5 para golpear el centro de un píxel.

context.drawImage(myimage, parseInt(x)+0.5, parseInt(y)+0.5); EDITAR:

Echa un vistazo a esta página en Html5Rocks!

Answer 2

Creo que este link será de ayuda completa. Hice lo mismo pero en mi caso le doy el peso y la altura del lienzo dinámicamente usando javascript. Luego le di la altura y el ancho al lienzo cuando lo declaro. Eso resuelve el problema.

Answer 3

Sé que esto ya ha sido respondido, pero quiero dar más información para hablar sobre lo que está sucediendo aquí y lo que se puede hacer.

Esto se debe al suavizado de la imagen, que de manera predeterminada suaviza los algoritmos como bilinear / trilieaner / bicubic en el lienzo de forma predeterminada, mientras que lo que se quiere se conoce como el vecino más cercano.

La especificación ha agregado recientemente una propiedad llamada imageSmoothingEnabled , que por defecto es true y determina si las imágenes dibujadas en coordenadas no enteras o dibujadas a escala usarán un algoritmo más suave. Si se establece en false , se usa el vecino más cercano, produciendo una imagen menos uniforme y, en cambio, solo se hacen píxeles más grandes.

El suavizado de imágenes solo se ha agregado recientemente a la especificación de lienzo y no es compatible con todos los navegadores, pero algunos navegadores han implementado versiones prefijadas por el vendedor de esta propiedad. En el contexto, existe mozImageSmoothingEnabled en Firefox y webkitImageSmoothingEnabled en Chrome y Safari, y establecerlos en false evitará que se produzca el suavizado. Desafortunadamente, en el momento de redactar este informe, IE9 y Opera no han implementado esta propiedad, el prefijo del proveedor o de otra manera.

En general, simplemente debe seguir dos reglas:

1. Si está escalando el lienzo, debe desactivar el suavizado de imagen o escalarlo mediante la interpolación del vecino más cercano. Hay algunos algoritmos para hacer esto manualmente en este momento y esto es lo que están haciendo las opciones anteriores.
2. Si no está dibujando en coordenadas enteras obtendrá el mismo problema y tiene la misma solución. Si las opciones anteriores no existen en su navegador, deberá volver a las coordenadas enteras (x | 0, y | 0)

Donde x | 0 x | 0 plantas x rápidamente, sin embargo, no funcionará con números mayores que 2,147,483,647: el mayor entero con signo de 32 bits.

Esperemos que sus coordenadas no sean más grandes que eso!