如何在没有抗锯齿的情况下拉伸图像

Question

所以我最近遇到了这个问题：

我很好奇：有没有办法用较小的图像来做这种事情？我的意思是，这是像素艺术，而不是使用每个像素四倍的图像而不是我们用代码来拉伸它们吗？因此，我开始尝试实现这一目标。

我尝试了CSS，Javascript甚至HTML，但没有一个起作用。它们都变得非常模糊，这使我想到了一个问题：您可以在浏览器中拉伸图像而无需任何抗锯齿功能吗？

我愿意接受任何建议，无论是使用画布，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中有任何方法（除了下面概述的画布技巧）。这样做甚至比JS快多少都不奇怪。

EDIT2：
因为这不是官方规范，所以不是很可靠。自从我撰写以上内容以来，Chrome和FF似乎都已停止支持它，这确实很烦人。我们可能要再等几年才能真正开始在CSS中使用它，这确实是不幸的。

最终编辑：现在 有一种正式的方法！有一个名为的新属性image- rendering。它在CSS3规范中。目前支持非常多，但是Chrome刚刚添加了支持，因此不久以后我们就可以说出来了，image- rendering: pixelated;并且可以在所有地方使用（yaayy常绿浏览器！）

Answer 1

Canvas文档明确没有指定缩放方法-在我自己的测试中，确实确实在Firefox中对图像进行了严重的锯齿处理。

下面的代码从源图像（必须来自相同的Origin或Data URI）中逐像素复制像素，并按指定的因子缩放。

需要额外的屏幕外画布（src_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);
        }
    }
};