htmlcanvaskineticjs

kineticjs (HTML5 Canvas) - smoothing image when scaling down


When i add large images onto my page with kineticjs i am getting some poor quality when i am setting them to quite small sizes. The result is often jagged/rough. If however i add the same image and set the dimensions just with img src I get a much better quality and smoothly scaled down version.

Is there anything i can add to combat this? jsfiddle, screenshot and code all below

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

example

// 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";

Solution

  • Well, based on the comment from @Cryptoburner. I implemented a custom shape in Kinetic and used the sceneFunc to use the drawImage function as implemented in the related link.

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

    enter image description here

    So here is the fiddle: http://jsfiddle.net/vTLkn/8/

    Now it's still not as good as the Img version, but it is and improvement. Since your image is 1000 pixels wider, it would probably be a good idea to do another iteration of downsizing (in the custom sceneFunc.

    PS. Updated the Kinetic version to 5.0.1, otherwise it didn't work.