KineticJS（HTML5画布） - 缩小时平滑图像

Question

当我使用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";

- odd_duck

---

Canvas（通常）使用双线性插值（在这种情况下是低通滤波器），而不是双三次插值，因为图像使用。我不确定如何在kinectjs中实现它，但原理（向下取样）在这里解释：https://dev59.com/EGMm5IYBdhLWcg3wHMJ0 简而言之，您需要将图像缩小两次（或更多），首先将目标大小减半，然后从一半到最终大小。 - user1693593

请问如何在HTML5 Canvas的drawImage函数中应用抗锯齿技术？此问题相关的讨论可以在stackoverflow.com上找到。 - Tomás

谢谢你提供的链接。但是我不确定如何在kineticjs中执行相同的过程，因为它是一种不同的绘图方式？ - odd_duck

Answer 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

---

谢谢Sjiep，完美。 - odd_duck

嗯，现在它确实是一个形状而不是图像，因此setImage不存在。您可以扩展现有的Kinetic.Image对象（请参见http://stackoverflow.com/questions/14892827/how-to-extend-kineticjs-shape），或者您可以创建自己的setImage函数。我修改了fiddle（http://jsfiddle.net/vTLkn/9/），使其具有可以通过getAttr（'image'）和setAttr（'image'，value）访问的图像属性，您的changeImage函数可以使用setAttr更改图像源 - Sjiep

非常感谢您的帮助，Sjiep。但是我无法让实际的setAttr（on change）响应。现在我有：http://jsfiddle.net/vTLkn/12/ 但是点击时没有任何反应。 - odd_duck

那是在我执行了 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. - odd_duck

你忘记了onload构造。这个可以用：http://jsfiddle.net/vTLkn/13/。在我看来，onload看起来有点奇怪/混乱，但我对它几乎没有经验。我相信代码可以写得更好，但是这个fiddle可以工作:P - Sjiep