Kineticjs: How Do I Downsize A Png/jpg Image In Kineticjs Maintaining High Quality?

I want to downsize a PNG/JPG image in KineticJS without losing quality. I did the following but it leads to very poor quality: var stage = new Kinetic.Stage({ container: 'con

Solution 1:

You can get good results by down-scaling the image in increments.

Here's a function that takes a source image (or canvas) and scales it down:

functionscaleImage(source,scaleFactor){
    var canvas=document.createElement("canvas");
    var ctx=canvas.getContext("2d");
    canvas.width=source.width*scaleFactor;
    canvas.height=source.height*scaleFactor;
    ctx.drawImage(source,0,0,source.width*scaleFactor,source.height*scaleFactor);
    return(canvas);
}

The scaleImage function could be used like this to downscale a very large image:

A Demo: http://jsfiddle.net/m1erickson/zYLLe/

var img=new Image();
img.onload=start;
img.src="hugeImage.png";
function start(){

    // c1 is 0.50 the size of imgvar c1=scaleImage(img,0.50);

    // c2 is 0.50 the size of c1  (==25% of the original img)var c2=scaleImage(c1,0.50);

    // and then create a Kinetic.Image using c2 as a source

    image1 = new Kinetic.Image({
        x:10,
        y:10,
        image:c2,
        draggable: true
    });
    layer.add(image1);
    layer.draw();
}