kineticjs (HTML5 Canvas) - 缩小时平滑图像

Posted 2023-03-05

【中文标题】kineticjs (HTML5 Canvas) - 缩小时平滑图像

【英文标题】：kineticjs (HTML5 Canvas) - smoothing image when scaling down

【发布时间】：2014-05-28 08:03:31

【问题描述】：

当我使用 kineticjs 在我的页面上添加大图像时，当我将它们设置为非常小的尺寸时，我的质量会变得很差。结果通常是锯齿状/粗糙的。但是，如果我添加相同的图像并仅使用 img src 设置尺寸，我将获得更好的质量和平滑的缩小版本。

有什么我可以添加来解决这个问题的吗？ jsfiddle，截图和代码都在下面

JSFIDDLE： http://jsfiddle.net/vTLkn/6/

// Define Stage
var stage = new Kinetic.Stage(
    container: "canvas",
    width: 300,
    height: 200
);

//Define Layer for Images
var layer = new Kinetic.Layer();
stage.add(layer);   

// Draw Image Function
function drawImage(image,w,h,x,y)  
    // Define Function's Image Properties
    var theImage = new Kinetic.Image(
        image: image,
        x: x,
        y: y,
        width: w,
        height: h
    );
    
    // Add Function's Image to Layer
    layer.add(theImage);
    layer.draw();

    
// Define Image 1 and Draw on Load
var image1 = new Image();
image1.onload = function() 
    drawImage( this, 250, 188, 0, 0);
;
image1.src = "http://i.imgbox.com/vMfjLbnw.jpg";

【问题讨论】：

Canvas（通常）使用双线性插值（在这种情况下为低通滤波器）而不是图像使用的双三次。我不知道如何用 kinectjs 来做，但这里解释了原理（向下步进）：***.com/questions/17861447/… 短版是你需要将图像缩小两次（或更多），首先是目标尺寸的一半，然后从一半缩小到最终尺寸。

相关***.com/questions/17861447/…

感谢您的链接。我不确定如何使用 kineticjs 执行相同的程序，因为它是绘制图像的不同方式？

【参考方案1】：

好吧，根据@Cryptoburner 的评论。我在 Kinetic 中实现了一个自定义形状，并使用了 sceneFunc 来使用相关链接中实现的 drawImage 函数。

var theImage = new Kinetic.Shape(
    sceneFunc: function(context) 
        /// step 1
        var oc = document.createElement('canvas'),
            octx = oc.getContext('2d');
        oc.width = image.width * 0.5;
        oc.height = image.height * 0.5;
        octx.drawImage(image, 0,0, oc.width,oc.height);

        /// step 2
        octx.drawImage(oc,0,0,oc.width * 0.5,oc.height * 0.5);



        context.drawImage(oc,0,0,oc.width * 0.5, oc.height * 0.5,
                         0,0,w,h);
    
);

所以这里是小提琴：http://jsfiddle.net/vTLkn/8/

现在它仍然不如 Img 版本，但它是并且改进了。由于您的图像宽了 1000 像素，因此进行另一次缩小尺寸迭代可能是个好主意（在自定义 sceneFunc 中。

PS。将Kinetic版本更新为5.0.1，否则无法使用。

【讨论】：

谢谢Sjiep，完美

我刚刚在我的完整代码中实现了这一点，虽然它可以工作，但如果用户希望选择另一个图像，我还有一个 setImage 函数可以更新图像：function changeImage(source) var新图像 = 新图像（）； var img = global.stage1.get('#Image1')[0]; newImage.onload = function() img.setImage(newImage); ; newImage.src = 源；但我得到 Uncaught TypeError: undefined is not a function - 它现在是形状而不是图像吗？

嗯，它现在确实是一个形状而不是一个图像，所以 setImage 是不存在的。您可以扩展现有的 Kinetic.Image 对象（请参阅***.com/questions/14892827/…），也可以创建自己的 setImage 函数。我调整了小提琴 (jsfiddle.net/vTLkn/9) 使其具有可以通过 getAttr('image') 和 setAttr('image', value) 访问的图像属性，您的 changeImage 函数可以使用 setAttr 更改图像源

Sjiep 再次向您大喊大叫，但我无法让实际的 setAttr（更改时）做出响应。我现在有：jsfiddle.net/vTLkn/12 但点击没有任何反应

那是在我做了drawImage('http://i.imgbox.com/F0xZeMLG.jpg', 213, 236, 0, 0); 之后，但这给了我一个控制台错误：Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided.