如何在没有抗锯齿的情况下拉伸图像
所以我最近碰到这个： http : //www.nicalis.com/index.php
我很好奇：有没有办法用较小的图像做这种事情？ 我的意思是，这是像素艺术，而不是使用每个像素四倍大小的图像，我们不能用代码来拉伸它们吗？ 所以我开始尝试做到这一点。
我尝试过CSS，Javascript甚至HTML，但都没有工作。 他们都模糊起来真的很糟糕（像这样： http : //jsfiddle.net/nUVJt/2/ ），这引起了我的问题：你可以伸展一个图像浏览器中没有任何antialiasing？
我打开任何build议，无论是使用canvas，jQuery，CSS3，或其他。
谢谢您的帮助！
编辑：现在有一个更好的方法来做到这一点！ 一个稍微不太危险的方式！ 这是魔法：
.pixelated { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; } 这将停止所有现代浏览器中的反锯齿。 它甚至可以在IE7-8中工作，但是不会在9，我不知道有什么办法在9，不幸的是（除了下面的canvas黑客）。 用JS这样做比用JS要快得多。 以下是关于这些的更多信息： https ： //developer.mozilla.org/en-US/docs/CSS/Image-rendering
编辑2：因为这还不是一个官方的规范，它不是很可靠。 Chrome和FF似乎都停止了支持它，因为我写了上面的内容（根据下面提到的这篇文章 ），这真的很烦人。 我们可能要等上好几年才能真正开始在CSS中使用它，这真的很不幸。
最终编辑：现在有一个正式的方法来做到这一点！ 有一个叫做image-rendering的新属性。 这是在CSS3规范 。 现在支持是非常多的 ，但是Chrome刚刚添加了支持，所以我们只能说image-rendering: pixelated; 它会工作的所有地方（yaayy常青浏览器！）
Canvas文档明确地没有指定缩放方法 – 在我自己的testing中，确实在Firefox中对图像进行了非常严重的反锯齿化处理。
以下代码从源图像（必须来自相同的来源或来自数据URI）逐个像素地进行复制，并按指定的因子进行缩放。
一个额外的屏幕外的canvas（ src_canvas ）需要接收原始的源图像，然后将其图像数据逐个像素地复制到屏幕canvas上。
var img = new Image(); img.src = ...; img.onload = function() { var scale = 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 = this.width * scale; dst_canvas.height = this.height * scale; var dst_ctx = dst_canvas.getContext('2d'); var offset = 0; for (var y = 0; y < this.height; ++y) { for (var x = 0; x < this.width; ++x) { var r = src_data[offset++]; var g = src_data[offset++]; var b = src_data[offset++]; var a = src_data[offset++] / 100.0; dst_ctx.fillStyle = 'rgba(' + [r, g, b, a].join(',') + ')'; dst_ctx.fillRect(x * scale, y * scale, scale, scale); } } };
http://jsfiddle.net/alnitak/LwJJR/上的演示;
编辑更优化的演示可在http://jsfiddle.net/alnitak/j8YTe/ ，也使用目标canvas的原始图像数据数组。
我已经得到这个工作的canvas
var canvas = document.getElementById("canvas"), context = canvas.getContext('2d'); context.webkitImageSmoothingEnabled = context.imageSmoothingEnabled = context.mozImageSmoothingEnabled = context.oImageSmoothingEnabled = false;
我能想到的唯一方法就是通过canvas。 您可以尝试简单地将图像绘制到canvas上，然后缩放canvas – 我认为您不会通过这种方式获得消除锯齿效果。 如果你仍然这样做，你可以尝试在绘图调用中缩放图像，或者如果这不起作用，可以使用getImageData和putImageData来“手动”
更新：第一种方法工作： http : //jsfiddle.net/nUVJt/3/
不。 浏览器做它，但是它不能控制缩放algorithm。
不过，我确定有一个基于canvas的解决scheme，但可能会涉及将源图像中的像素复制出来，并战略性地将它们绘制到canvas中。 这将是棘手的，但可能（和缓慢）。
即时通讯不知道，但也许你可以使用imagedata。 试试这个function..
function imageToImageData(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; var ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0); return ctx.getImageData(0, 0, canvas.width, canvas.height); }
