我有一些 JS 对图像进行一些操作。我想要类似像素艺术的图形，所以我必须在图形编辑器中放大原始图像。
但我认为用小图像进行所有操作然后使用 html5 功能放大它是个好主意。这将节省大量处理时间（因为现在my demo http://anal-slavery.com/dolboebi/ (warning: 域名可能会导致工作中出现一些问题等）例如，在 Firefox 中加载时间非常长）。
但是当我尝试调整图像大小时，它会以双三次方式重新采样。如何使其在不重新采样的情况下调整图像大小？有没有跨浏览器的解决方案？
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可以使用画布提供后备情况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);
}
}
More: 有关图像渲染的 MDN 文档 https://developer.mozilla.org/En/CSS/Image-rendering
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
