HTML5画布:有没有办法用"最近邻居"重新采样来调整图像大小？

Question

我有一些JS用图像做一些操作.我想要像pixelart一样的图形,所以我不得不在图形编辑器中放大原始图像.但我认为用小图像进行所有操作然后用html5功能放大它是个好主意.这将节省大量的处理时间(因为现在我的演示(警告:域名可能会导致工作中的一些问题等)在Firefox中加载非常长时间,例如).但是当我尝试调整图像大小时,它会被双重重采样.如何在不重新采样的情况下调整图像大小？有没有任何crossbrowser解决方案？

Answer 1

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

http://phrogz.net/tmp/canvas_image_zoom.html可以使用canvas和getImageData.提供后备案例.简而言之:

// 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);
  }
}

更多:关于图像渲染的MDN文档

Answer 2

不久前我使用 ImageData 编写了一个 NN 大小调整脚本（大约 1794 行）

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

你可以在这里看到一个演示

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

不幸的是，内置的调整大小应该稍微快一点。