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();
}
Post a Comment for "Kineticjs: How Do I Downsize A Png/jpg Image In Kineticjs Maintaining High Quality?"