所以我最近遇到了这个问题：http://www.nicalis.com/
我很好奇：有没有办法用更小的图像来做这种事情？我的意思是，这是像素艺术，而不是使用一个图像，每个像素的大小是原来的四倍，我们不能用代码来扩展它们吗？所以我开始尝试让它发生
我尝试了CSS、Javascript，甚至HTML，但都没有成功。它们都非常模糊（如下所示：http://jsfiddle.net/nUVJt/2/)，这就引出了我的问题：您能否在浏览器中拉伸图像而不进行任何抗锯齿处理
我愿意接受任何建议，无论是使用画布、jQuery、CSS3还是其他什么
谢谢你的帮助
编辑：现在有更好的方法！一种稍微不那么粗俗的方式！这就是神奇之处：
像素化{
图像渲染：-moz清晰的边缘；
图像渲染：-o-脆边；
图像渲染：-webkit优化对比度；
-ms插值方式：最近邻；
图像渲染：像素化；
}
这将停止所有现代浏览器中的抗锯齿。它甚至可以在IE7-8中工作，但不能在9中工作，不幸的是，我不知道有什么方法可以在9中工作（除了下面概述的canvas hack）。
这样做比JS快多少，这一点都不好笑。以下是关于这些的更多信息：https://developer.mozilla.org/en-US/docs/CSS/Image-rendering
EDIT2:因为这还不是官方规范，所以不太可靠。自从我写了上面的文章（根据下面提到的这篇文章），Chrome和FF似乎都不再支持它了，这真的很烦人。我们可能还要等几年才能真正开始在CSS中使用它，这真的很不幸
最终编辑：现在有一个正式的方法来完成此操作！有一个新属性叫做图像渲染。它在CSS3规范中。现在支持非常不稳定，但Chrome刚刚添加了支持，所以不久我们就可以说图像渲染：像素化并且它可以在所有地方工作（yaayy evergreen浏览器！）
Canvas文档没有明确指定缩放方法——在我自己的测试中，它确实在Firefox中对图像进行了非常糟糕的反别名处理
下面的代码从源图像（必须来自同一来源或数据URI）逐像素复制，并按指定的因子对其进行缩放
需要额外的屏幕外画布（src_canvas）来接收原始源图像，然后将其图像数据逐像素复制到屏幕画布中
var img=new Image（）；
img.src=。。。；
img.onload=函数（）{
var量表=8；
var src_canvas=document.createElement（'canvas'）；
src_canvas.width=this.width；
src_canvas.height=this.height；
var src_ctx=src_canvas.getContext（'2d'）；
src_ctx.drawImage（this，0，0）；
var src_data=src_ctx.getImageData（0，0，this.width，this.height）.data；
var dst_canvas=document.getElementById（'canvas'）；
dst_canvas.width=此.width*比例；
dst_canvas.height=此.height*比例；
var dst_ctx=dst_canvas.getContext（'2d'）；
var偏移=0；
对于（变量y=0；y<；this.height；++y）{
对于（变量x=0；x<；this.width；++x）{
var r=src_数据[offset++]；
var g=src_数据[offset++]；
var b=src_数据[offset++]；
var a=src_数据[offset++]/100.0；
dst_ctx.fillStyle='rgba（'+[r，g，b，a].join（'，'）+'）；
dst_ctx.fillRect（x*刻度，y*刻度，刻度，刻度）；
}
}
};
工作演示http://jsfiddle.net/alnitak/LwJJR/
编辑可在http://jsfiddle.net/alnitak/j8YTe/ 它还将原始图像数据数组用于目标画布