Question

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

Answer 1

基于codetaku的回答和Ken在另一篇文章（Html5 canvas drawImage: how to apply antialiasing）中的答案，我能够创建一个小帮助函数，在确定要执行的步骤后自动创建步骤。

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

我认为原始宽度和新宽度也可以用Ken所述尺寸的产品代替。但我不知道会有多准确。

希望有所帮助！

Answer 2

正如拉塞尔在第一篇评论中所说，但为了证明这是一个答案，我会详细说明一下。

您可以对此进行编码以反复进行操作，直到图像达到最终所需大小;每次减少一半，直到最终尺寸大于或等于当前图像的一半。

这导致了一些迭代，相当于将完整大小的log，base 2除以目标大小。因此，如果您想明确指定步数，则等式为

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

但是，简单地创建while循环更有意义;当目标尺寸小于当前尺寸的一半时，将当前尺寸减半。 while循环完成后，直接缩小到目标大小。

确定画布插值中的步数

2 个答案: