div - zoom image css3 html5
Uso del vecino más cercano con zoom CSS en lienzo(e img) (3)
Al usar la propiedad de zoom CSS, ¿cómo puedo convencer al navegador para que use "vecino más cercano", en lugar de "bilineal" o cualquier otro algoritmo de zoom más avanzado?
Mi configuración es un div que contiene un lienzo, y el div obtiene su conjunto de zoom a través de JavaScript para que sea <div style="zoom:3200%">...</div> y para obtener el vecino más cercano, estoy usando image-rendering: -webkit-optimize-contrast en mi CSS. La aplicación está disponible aquí (''z'' se acerca, ''shift-z'' se aleja), y mi css está here
Aquí está el efecto deseado en Chrome en OSX (el zoom se establece en 3200%):
Pero aquí es lo mismo en Chrome en Windows 7:
En ambos casos es Chrome "vainilla" (versión 15.xx) fuera de la caja, no hay indicadores experimentales activados.
¿Cómo puedo convencer a Chrome en Windows para que use el vecino más cercano? Por cierto, ¿cómo puedo convencer a todos los navegadores? Safari tampoco usa el vecino más cercano (hasta ahora la aplicación solo funciona en navegadores basados en WebKit)
La propiedad de image-rendering CSS afecta a Chrome / OSX y me da el efecto deseado. Pero Chrome / Windows y Safari (5.1) / OSX parecen ignorarlo por completo. Algo me dice que estoy fuera de suerte, pero pensé que iba a preguntar.
Usar el zoom en el contenedor div es muy simple y funciona a la perfección en Chrome / OSX. Si tengo que recurrir a escalar mis lienzos internamente, también puedo hacerlo. ¡Pero preferiría literalmente una línea de solución de código si es posible!
ACTUALIZACIÓN: He encontrado el uso de image-rendering: optimizeSpeed de image-rendering: optimizeSpeed ayuda. Sin embargo, parece complicado en Chrome / Windows. Si lo puse en demasiados elementos (lo intenté inicialmente, mis contenedores y todos los lienzos), no tendrá efecto. Pero si lo aplico solo al canvas , obtengo el 98% del camino.
Ahora mi problema es la primera vez que dibujo mientras lo amplío, funciona perfectamente, todas las demás acciones de dibujo subsiguientes se ven borrosas mientras se llevan a cabo, luego vuelven al vecino más cercano correcto (mi aplicación dibuja primero en un lienzo, luego Aplica el dibujo al lienzo real). Hay algo extraño en el lienzo de scratch en el que Chrome insiste en usar bilineal. Creo que con un poco de excavación puedo resolver eso.
ACTUALIZACIÓN2: Parece que image-rendering en Chrome / Windows simplemente no se implementa bien y está un poco llena de errores. Ahora puedo confirmar que los valores optimizeSpeed y optimizeQuality no son compatibles con Chrome / Windows. Si establece la representación de imagen en ellos, Chrome ignorará el conjunto. Chrome / Windows reconoce -webkit-optimize-contrast , sin embargo no lo usa de manera consistente. Chrome cambiará entre lo que parece ser un algoritmo de escala bilineal y el vecino más cercano casi al azar. No he podido hacer que Chrome utilice de manera consistente al vecino más cercano.
Probé una versión de Chromium 17 en Windows y se comporta de la misma manera.
Sin embargo, Firefox (8.0.1) se ve bastante prometedor, ya que parece honrar bastante bien a los -moz-crisp-edges . Originalmente, estaba apuntando a Chrome como mi "navegador ideal" para esta aplicación, podría cambiar a Firefox.
Al final, parece que el soporte adecuado para image-rendering de image-rendering está en la línea de Chrome, pero aún no está allí. El propio WebKit afirma ser totalmente compatible con todos los valores de representación de imágenes, pero supongo que la compilación de WebKit que utiliza Chrome no se ha actualizado a esta nueva solución.
Hay una manera. Hice una pregunta similar a esta aquí: cómo estirar imágenes sin suavizar y obtuve una respuesta realmente buena. Lo he modificado un poco desde entonces, pero aquí hay una versión simple que se extiende (sin suavizado) cuando se hace clic en: http://jsfiddle.net/howlermiller/U2eBZ/1/
Aunque es increíblemente hackista. No lo uses a menos que debas. Tiene que volver a crear la imagen cada vez que haga clic en ella, por lo que con una imagen grande sería lenta y terrible. Pero funciona en Chrome / Windows.
Editar: Esto es compatible con la especificación CSS3 ahora! El soporte es súper irregular en este momento, pero Chrome acaba de agregar soporte, así que espero que podamos usarlo en poco tiempo. ¡Buenos tiempos!
.thing { image-rendering: pixelated; }
Ya que estás usando lienzo de todos modos, también podrías implementar tu propio zoom e implementar manualmente el cambio de tamaño del vecino más cercano.
Sospecho que incluso si resuelves este problema, algún día te encontrarás con otra cosa.
La respuesta de @ Timothy parece tener un buen código que puede usar para ayudar con las matemáticas reales.
ctx.webkitImageSmoothingEnabled = false ahora parece funcionar desde el 22.