Tengo un objeto animado que se anima con una hoja de sprite. Solo mide 16x16, pero quiero aumentarlo hasta 64x64 en toda su bondad de píxel-y!Representación de vecino más cercano en lienzo
alt text http://i30.tinypic.com/2nu243.jpg
Los resultados son terribles, por supuesto, el navegador es anti aliasing es. :/
Gracias!
En caso de que alguien se tropiece con esto de nuevo (como yo), Webkit admite un valor -webkit-optimize-contrast para image-rendering, que (actualmente) es una implementación de la ampliación de vecino más cercano. Se puede aplicar tanto a imágenes como a lienzos.
Aquí hay un ejemplo de cómo funciona.
.nn128 {
width: 128px;
height: 128px;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
}
<canvas class="nn128" width="16" height="16"></canvas>
<img src="path/to/small/image.png" alt="Small image" class="nn128">
Con esta configuración, tanto
Webkit
Safari y Gecko/Firefox ampliará el espacio de la tela de 16x16 y la imagen pequeña de 128x128 con el algoritmo del vecino más cercano.
ACTUALIZACIÓN La respuesta indicó inicialmente que Webkit navegadores apoyaron esta; de hecho, desde 2011-12-24, funciona con Safari en Mac OS y Chrome en Mac OS, pero no con Chrome uno de Windows (no se verificó Safari en Windows), como se indica en Issue 106662 of the Chromium bug tracker. Léxicamente, Chrome en Windows aceptará el valor -webkit-optimize-contrast en una hoja de estilo CSS, pero no tendrá ningún efecto. Tengo la expectativa de que funcione algún día, y este método será la manera correcta de obtener la ampliación de vecino más cercano, pero por ahora, usar este método significa que los usuarios de Windows Chrome tendrán que vivir con la visión borrosa.
¿Hay alguna manera de que pueda proporcionar una muestra? Sé que es bastante sencillo ... pero aún así lo agradecería muchísimo. – DevEarley
@Okiedoke, acabo de hacer eso. – zneak
Esto no parece funcionar desde el 30 de septiembre de 2011. Estoy usando Chrome 14.0 y '-webkit-optimize-contrast' aparentemente no hace nada para cambiar la forma en que se interpolan las imágenes. * Acepta * el valor de 'representación de imagen', por lo que debe haber algún nivel de soporte; tal vez está roto? – namuol
En Firefox puede utilizar esta:
canvas {
image-rendering: -moz-crisp-edges;
}
Pero por lo que sé con cualquier otro navegador que está bastante fuera de suerte. Una forma de evitar esto quizás es escalar su sprite a 64x64 en Photoshop (o lo que sea), y luego usarlo reducido a escala en el lienzo. De esta forma, al menos la imagen no se verá borrosa cuando se "amplíe". Sin embargo, todavía no le dará exactamente el modo puro7 como la bondad del vecino más cercano.
Puede escribir su propio código de escala usando el objeto imageData. Usted incurrirá en una penalización de rendimiento significativa al hacerlo, pero para una imagen de 16x16, podría no ser tan significativo.
Véase también mi respuesta a [esta pregunta] (http://stackoverflow.com/questions/4875850/how-to-create-a-pixelized-svg-image-from-a-bitmap/4879849) que muestra cómo usar JavaScript + Canvas para usar el vecino más cercano en cada navegador. – Phrogz
La respuesta vinculada en el comentario anterior es mucho más completa – sfridman