HTML5 canvas:有没有一种方法可以通过“最近的邻居"来调整图像的大小.重采样? [英] HTML5 canvas: is there a way to resize image with "nearest neighbour" resampling?

问题描述

我有一些JS，可以对图像进行一些操作.我想拥有类似pixelart的图形，因此我不得不在图形编辑器中放大原始图像. 但是我认为最好用小图像进行所有操作，然后使用html5功能将其放大.这将节省大量处理时间(因为现在我的演示(警告:域名可能会在工作中引起一些问题，例如)在Firefox中的加载时间过长. 但是，当我尝试调整图像大小时，它会被三次采样.如何在不重新采样的情况下调整图像大小?有跨浏览器解决方案吗?

I have some JS that makes some manipulations with images. I want to have pixelart-like graphics, so I had to enlarge original images in graphics editor. But I think it'd be good idea to make all the manipulations with the small image and then enlarge it with html5 functionality. This will save bunch of processing time (because now my demo (warning: domain-name may cause some issues at work etc) loads extremely long in Firefox, for example). But when I try to resize the image, it gets resampled bicubically. How to make it resize image without resampling? Is there any crossbrowser solution?

推荐答案

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

http://phrogz.net/tmp/canvas_image_zoom.html 可以使用画布和.简而言之:

http://phrogz.net/tmp/canvas_image_zoom.html can provide a fallback case using canvas and getImageData. In short:

// 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文档

这篇关于HTML5 canvas:有没有一种方法可以通过“最近的邻居"来调整图像的大小.重采样?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！