Lienzo de HTML5: ¿hay alguna manera de cambiar el tamaño de la imagen con un remuestreo de "vecino más cercano"?

canvas resampling

Question

Tengo algunos JS que hacen algunas manipulaciones con imágenes. Quiero tener gráficos parecidos a pixelart, así que tuve que agrandar las imágenes originales en el editor de gráficos. Pero creo que sería una buena idea hacer todas las manipulaciones con la imagen pequeña y luego ampliarla con la funcionalidad html5. Esto ahorrará mucho tiempo de procesamiento (porque ahora mi demo ( advertencia : nombre de dominio puede causar algunos problemas en el trabajo, etc.) es extremadamente larga en Firefox, por ejemplo). Pero cuando trato de cambiar el tamaño de la imagen, se remuestrea bicúbicamente. ¿Cómo hacer que cambie el tamaño de la imagen sin remuestrear? ¿Hay alguna solución con navegador cruzado?

Answer 1

No hay una forma incorporada. Tienes que hacerlo tú mismo con getImageData .

Answer 2

image-rendering: -webkit-optimize-contrast; /* webkit */
image-rendering: -moz-crisp-edges /* Firefox */

http://phrogz.net/tmp/canvas_image_zoom.html puede proporcionar un caso alternativo utilizando canvas y getImageData . En breve:

// Create an offscreen canvas, draw an image to it, and fetch the pixels
var offtx = document.createElement(''canvas'').getContext(''2d'');
offtx.drawImage(img1,0,0);
var imgData = offtx.getImageData(0,0,img1.width,img1.height).data;

// Draw the zoomed-up pixels to a different canvas context
for (var x=0;x<img1.width;++x){
  for (var y=0;y<img1.height;++y){
    // Find the starting index in the one-dimensional image data
    var i = (y*img1.width + x)*4;
    var r = imgData[i  ];
    var g = imgData[i+1];
    var b = imgData[i+2];
    var a = imgData[i+3];
    ctx2.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
    ctx2.fillRect(x*zoom,y*zoom,zoom,zoom);
  }
}

Más: documentos de MDN sobre la representación de imágenes

Answer 3

Escribí un script de redimensionamiento de NN hace un tiempo usando ImageData (alrededor de la línea 1794)

https://github.com/arahaya/ImageFilters.js/blob/master/imagefilters.js

Puedes ver una demostración aquí

http://www.arahaya.com/imagefilters/

desafortunadamente, el redimensionamiento incorporado debería ser un poco más rápido.