相关疑难解决方法(0)

首先:我想做什么？

我有一个查看图像的应用程序.它使用canvas元素渲染图像.你可以放大,你可以缩小,你可以拖动它.这部分现在完美运作.

但是,假设我有一个包含大量文本的图像.它的分辨率为1200x1700,我的画布有1200x900.最初,当缩小时,这会导致渲染分辨率为~560x800.

我的实际绘图如下:

drawImage(src, srcOffsetX, srcOffsetY, sourceViewWidth, sourceViewHeight,
destOffsetX, destOffsetY, destWidth, destHeight);

此图像上的小文字看起来非常非常糟糕,特别是与其他图像查看器(例如IrfanView)或甚至html <img>元素相比时.

我发现浏览器插值算法是导致这个问题的原因.比较不同的浏览器显示,Chrome渲染缩放图像效果最佳,但仍然不够好.

好吧,我在Interwebs的每个角落搜索了4-5个小时,没找到我需要的东西.我找到了"imageSmoothingEnabled"选项,"图像渲染"CSS样式,你不能在画布上使用,在浮动位置渲染和插值算法的许多JavaScript实现(这些我的目的很慢).

你可能会问为什么我告诉你这一切:为了节省你给我答案的时间我已经知道了

那么:有没有更好的快速方法来获得更好的插值？我目前的想法是创建一个图像对象,调整大小(因为img在缩放时具有良好的插值!)然后渲染它.不幸的是,应用img.width似乎只会影响显示的宽度......

更新:感谢西蒙,我可以解决我的问题.这是我使用的动态缩放算法.请注意,它保持纵横比,height参数仅用于避免更多的浮点计算.它现在只缩小.

scale(destWidth, destHeight){
        var start = new Date().getTime();
        var scalingSteps = 0;
        var ctx = this._sourceImageCanvasContext;
        var curWidth = this._sourceImageWidth;
        var curHeight = this._sourceImageHeight;

        var lastWidth = this._sourceImageWidth;
        var lastHeight = this._sourceImageHeight;

        var end = false;
        var scale=0.75;
        while(end==false){
            scalingSteps +=1;
            curWidth *= scale;
            curHeight *= scale;
            if(curWidth < destWidth){
                curWidth = destWidth;
                curHeight = destHeight; …