当前位置：文江博客话题详情

HTML5 Canvas - 如何放大像素？

发布于 2024-10-07 20:53:15 字数 120 浏览 1 评论 0原文

如何放大画布才能看到像素？目前，当我尝试使用scale()函数时，图像始终是抗锯齿的。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一笑百媚生 2024-10-14 20:53:15

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

所以只要你想用 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) 处绘制。

As far as I know any rescaling done by the browser will result in a smooth interpolation.

So as long as you want to do this with JS you will have to let JS do all the work. This means either finding a nice library or writing a function yourself. It could look like this. But I hope it's possible to make it faster. As it's one of the simplest scaling algorithms there are probably many people who thought up improvements to do it even faster.

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

This function would take the rectangle of size (sw,sh) at (sx,sy), resize it to (tw,th) and draw it at (tx,ty).

回复收藏 0 原文