javascript - 确定画布插值的步数

Question

这个答案https://stackoverflow.com/a/17862644是使用步骤缩小图像的一个很好的例子。我的简单问题是：如何自动确定要使用多少步来缩小图像。

Answer 1

根据 codetaku 的回答和 Ken 在另一篇文章（Html5 canvas drawImage: how to apply antialiasing）中的回答，我能够创建一个小辅助函数，在确定有多少步骤后自动创建步骤。

这是小提琴：http: //jsfiddle.net/44svz/2/

function step(img, num, w, h, nw, nh){
 if ( nw/w >= 1 && nh/h >= 1 ) return img;
 var oc = document.createElement('canvas'),
    octx = oc.getContext('2d'),
    can = document.createElement('canvas'),
    ctx = can.getContext('2d'),
    mult = 1;
    num = Math.max(0, num-1);
    oc.width = w * 0.5;
    oc.height = h * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);
    if ( num ) {
        for ( var i = 1; i<num; i++ ) {
          octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
            mult = mult * 0.5;
        }
    }
    can.width=nw;
    can.height=nh;
    ctx.drawImage(oc, 0, 0, oc.width * mult, oc.height * mult, 0, 0, nw, nh);
    return can;
}

这个函数需要知道原始尺寸和目标尺寸nw，nh。确定要采取多少步的等式如下：

var det = Math.ceil(Math.log(original_width/new_width) / Math.log(2));

我认为原始宽度和新宽度也可以替换为肯所指出的尺寸的产品。但是，我不知道这会更准确。

希望有帮助！

Answer 2

正如罗素在第一条评论中所说，但为了证明这是一个答案，我会详细说明一下。

您可以对其进行编码以迭代地工作，直到图像达到最终所需的大小；每次缩小一半，直到最终尺寸大于或等于当前图像的一半。

这会导致多次迭代，相当于将完整大小的以 2 为底的日志除以目标大小。因此，如果您想明确指定步数，您的等式将是

ceiling(log(fullSize/targetSize) / log(2))

然而，简单地做一个while循环更有意义。当目标尺寸小于当前尺寸的一半时，将当前尺寸减半。一旦while循环完成，直接缩小到目标大小。