如何在不使用抗锯齿的情况下拉伸图像

Question

所以我最近遇到了这个： http://www.nicalis.com/

我很好奇：是有没有办法用较小的图像来做这种事情？我的意思是，它是像素艺术，而不是使用每个像素大小四倍的图像，我们不能用代码拉伸它们吗？所以我开始努力实现它。

我尝试了 CSS、Javascript，甚至 HTML，但都不起作用。它们都模糊得非常严重（像这样：http://jsfiddle.net/nUVJt/2/)，这让我想到了我的问题：你能在浏览器中拉伸图像而不使用任何抗锯齿吗？

我愿意接受任何建议，无论是使用画布、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 快得多，这一点都不好笑。以下是有关这些内容的更多信息： https://developer.mozilla.org/ en-US/docs/CSS/Image-rendering

EDIT2： 因为这还不是官方规范，所以不太可靠。自从我写了上面的内容以来，Chrome 和 FF 似乎都已停止支持它（根据 这篇文章（下面提到了），这真的很烦人。我们可能还得再等几年才能真正开始在 CSS 中使用它，这确实很不幸。

最终编辑：现在有一个官方方法可以做到这一点！有一个名为image-rendering的新属性。它位于 CSS3 规范中。目前的支持超级不稳定，但是Chrome 刚刚添加了支持，之前也是如此很长一段时间后，我们就可以只说 image-rendering: Pixelated; 并且它可以在所有地方工作（yaayy 常青浏览器！）

Answer 1

Canvas 文档明确没有指定缩放方法 - 在我自己的测试中，它确实在 Firefox 中非常糟糕地消除了图像锯齿。

下面的代码从源图像（必须来自同一源或来自数据 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);
        }
    }
};

工作演示位于 http://jsfiddle.net/alnitak/LwJJR/

编辑 更优化的演示位于 http://jsfiddle.net/alnitak/j8YTe/ 也使用原始图像数据数组作为目标画布。

Answer 2

我已经让它适用于画布

var canvas = document.getElementById("canvas"),
    context = canvas.getContext('2d');
context.webkitImageSmoothingEnabled = context.imageSmoothingEnabled = context.mozImageSmoothingEnabled = context.oImageSmoothingEnabled = false;

Answer 3

我能想到的唯一方法是通过画布。您可以尝试简单地将图像绘制到画布上，然后缩放画布 - 我认为您不会通过这种方式获得抗锯齿效果。如果仍然这样做，您可以尝试在绘图调用中缩放图像，或者如果不起作用，您可以使用 getImageData 和 putImageData“手动”更新缩放图像

：第一种方法有效：http://jsfiddle.net/nUVJt/3 /

Answer 4

没有。浏览器无论如何都会这样做，并且您无法控制缩放算法。

但是，我确信您可以制作一个基于画布的解决方案，但它可能涉及从源图像中复制像素并有策略地将它们绘制到画布中。这会很棘手，但有可能（而且很慢）。

Answer 5

我不确定，但也许你可以使用图像数据。试试这个功能..

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);
}