[英]Resizing a canvas image without blurring it
我有一个小图像,我在画布上渲染,像这样:
ctx.drawImage(img, 0, 0, img.width*2, img.height*2);
我希望这能显示一个急剧增大的图像(每个图像像素有4个相同的像素)。 但是,此代码(在Mac上的Chrome 29中)会产生模糊的图像。 在Photoshop术语中,它看起来像是使用“Bicubic”重采样,而不是“最近邻”。
在它有用的情况下(例如复古游戏),是否有可能产生锐化的图像,或者我是否需要为服务器上的每个图像大小分别创建一个图像文件?
简单地关闭画布'抗锯齿图像 - 不幸的是这个属性仍然是供应商前缀,所以这里是变化:
context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
然后绘制图像。
对于尚未实现此功能的旧版本和浏览器,您可以选择使用CSS:
canvas {
image-rendering: optimizeSpeed; // Older versions of FF
image-rendering: -moz-crisp-edges; // FF 6.0+
image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
image-rendering: -o-crisp-edges; // OS X & Windows Opera (12.02+)
image-rendering: crisp-edges; // Possible future browsers.
-ms-interpolation-mode: nearest-neighbor; // IE (non standard naming)
}
检查这个小提琴: http : //jsfiddle.net/yPFjg/
它将图像加载到画布中,然后创建一个调整大小的副本并将其用作精灵。
只需很少的修改,您就可以实现一个图像加载器,可以动态调整图像大小。
var ctx = document.getElementById('canvas1').getContext('2d');
var img = new Image();
var original = document.createElement("canvas");
var scaled = document.createElement("canvas");
img.onload = function() {
var oc = original.getContext('2d');
var sc = scaled.getContext('2d');
oc.canvas.width = oc.canvas.height = 16;
sc.canvas.width = sc.canvas.height = 32;
oc.drawImage(this, 0, 0);
var od = oc.getImageData(0,0,16,16);
var sd = sc.getImageData(0,0,32,32);
for (var x=0; x<32; x++) {
for (var y=0; y<32; y++) {
for (var c=0; c<4; c++) {
// you can improve these calculations, I let them so for clarity
sd.data[(y*32+x)*4+c] = od.data[((y>>1)*16+(x>>1))*4+c];
}
}
}
sc.putImageData(sd, 0, 0);
ctx.drawImage(scaled, 0, 0);
}
img.src = document.getElementById('sprite').src;
关于getImageData的一些注意事项:它返回一个带数组的对象。 该阵列的高度为*宽* 4。 颜色分量以RGBA顺序存储(红色,绿色,蓝色,alpha,每个值8位)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.