Question

如何放大画布以查看像素？目前，当我尝试使用scale（）函数时，图像始终是抗锯齿的。

属性mozImageSmoothingEnabled似乎有效，但它仅适用于Firefox。

Answer 1

据我所知，浏览器完成的任何重新缩放都会导致平滑插值。

因此，只要你想用JS做这件事，你就必须让JS完成所有的工作。这意味着要么找到一个好的库，要么自己编写一个函数。它可能看起来像这样。但我希望有可能让它更快。由于它是最简单的缩放算法之一，可能有很多人考虑过改进，以便更快地完成。

function resize(ctx, sx, sy, sw, sh, tx, ty, tw, th) {
    var source = ctx.getImageData(sx, sy, sw, sh);
    var sdata = source.data;

    var target = ctx.createImageData(tw, th);
    var tdata = target.data;

    var mapx = [];
    var ratiox = sw / tw, px = 0;
    for (var i = 0; i < tw; ++i) {
        mapx[i] = 4 * Math.floor(px);
        px += ratiox;
    }

    var mapy = [];
    var ratioy = sh / th, py = 0;
    for (var i = 0; i < th; ++i) {
        mapy[i] = 4 * sw * Math.floor(py);
        py += ratioy;
    }

    var tp = 0;
    for (py = 0; py < th; ++py) {
        for (px = 0; px < tw; ++px) {
            var sp = mapx[px] + mapy[py];
            tdata[tp++] = sdata[sp++];
            tdata[tp++] = sdata[sp++];
            tdata[tp++] = sdata[sp++];
            tdata[tp++] = sdata[sp++];
        }
    }

    ctx.putImageData(target, tx, ty);
}

此函数将在（sx，sy）处取大小（sw，sh）的矩形，将其大小调整为（tw，th）并在（tx，ty）处绘制。

Answer 2

据我所知，抗锯齿行为未在规范中定义，并且取决于浏览器。

您可以尝试的一件事是，如果您使用CSS将画布的宽度/高度设置为例如300x300，然后将画布宽度和高度属性设置为150和150，它将显示为“放大”200％。我不确定这是否会触发抗锯齿，但确实给它一个镜头。

HTML5 Canvas - 如何放大像素？

2 个答案: