javascript - mis - porque whatsapp baja la calidad de las fotos de perfil
¿Por qué las imágenes pierden calidad una vez que se ha girado el contexto? (5)
Bueno, en realidad es algo que no puedes evitar
Si gira una imagen en un múltiplo de 90 grados, su biblioteca debería ser lo suficientemente inteligente para que no se aplique interpolación.
Pero tan pronto como gira una imagen en un ángulo diferente de un múltiplo de 90 grados, necesita interpolar. Como consecuencia, obtienes ese suavizado. Si le interesa la teoría, puede buscar un libro sobre gráficos por computadora o procesamiento de imágenes.
Para el caso concreto de la rotación de imágenes, puede echar un vistazo a este artículo, http://bigwww.epfl.ch/publications/unser9502.html
Estoy haciendo un juego de disparos de arriba hacia abajo que depende de que el avatar siempre se gire apuntando al cursor del mouse. Logro una rotación como esta:
//Rendering.
context.save(); //Save the context state, we''re about to change it a lot.
context.translate(position[0] + picture.width/2, position[1] + picture.height/2); //Translate the context to the center of the image.
context.rotate(phi); //Rotate the context by the object''s phi.
context.drawImage(picture.image, -picture.width/2, -picture.height/2); //Draw the image at the appropriate position (center of the image = [0, 0]).
context.restore(); //Get the state back.
Cuando phi es cero, la imagen se procesa en su calidad normal, con bordes afilados y píxeles detectables. Pero, cuando configuro el phi en un valor distinto de cero (en realidad, cuando no es 0 , Pi/2 , Pi , Pi+Pi/2 o 2Pi ), la imagen pierde nitidez y los píxeles individuales ya no se pueden ver, porque están borrosos
Aquí hay una captura de pantalla (disculpa la mala calidad general de la captura de pantalla, pero creo que la diferencia es más que notable):
Esto es, bueno, un poco inaceptable. No puedo hacer que las imágenes siempre se borren. ¿Por qué está pasando esto y puedo resolverlo?
SI está rotando imágenes alrededor de su punto central, asegúrese de que la imagen tenga un número par de píxeles. Una vez que termina en coordenadas impares, los datos de imagen deben interpolarse para el lienzo de destino. Apple tiene una buena documentación sobre cómo traducir y rotar el lienzo .
Entonces, para cualquier imagen, como se sugiere arriba, use el redondeo para ajustar a píxeles completos.
context.translate(Math.floor(img.width/2), Math.floor(img.height/2));
De esta forma, cada píxel fuente de tu imagen siempre se dibujará exactamente en un píxel dentro del lienzo y no se producirá la borrosidad. Sin embargo, esto solo es cierto para múltiplos de 90 grados.
Parece que todos los navegadores realizan, en cierta medida, un antialiasing en el dibujo de imágenes, por lo que probablemente tendrá que proporcionar imágenes giradas como sprites.
Según este informe de errores de Chromium, es posible que tengas suerte si aún no lo han solucionado. Lea detenidamente y verá que Ian Hickson probablemente se opuso a que el dibujo de imágenes antialias sea opcional.
Solo un consejo: no sé si solo estás aprendiendo el programa Canvas, pero puedes usar ImpactJs para ayudarte a construir un juego retro.
Tu podrías intentar
context.imageSmoothingEnabled = false;
Ver docs :
context.imageSmoothingEnabled [= value]
Devuelve si el patrón se llena y el método drawImage () intentará suavizar las imágenes si tienen que volver a escalarlas (en lugar de simplemente representar las imágenes con "píxeles grandes").
Se puede configurar, para cambiar si las imágenes se suavizan (verdadero) o no (falso).
Si quieres un verdadero efecto de estilo retro de pixel-art, necesitarías crear manualmente imágenes de sprites giradas para varios ángulos, buscar el sprite apropiado para el valor actual de phi , y dibujarlo sin rotación. Esto obviamente requiere una buena cantidad de obras de arte!
(picture.width/2, picture.height/2) point no siempre funcionará.
(Math.floor(picture.width/2) + 0.5, Math.floor(picture.height/2) + 0.5) debería ayudar.