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

下面的代码从源图像（必须来自相同的 Origin 或来自数据 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/上提供了更优化的演示，该演示还使用原始图像数据数组作为目标画布。

我已经把它用于画布

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

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

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

不。浏览器会这样做，但它会这样做，并且您无法控制缩放算法。

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

我不确定，但也许您可以使用 imagedata。试试这个功能。。

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