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/
// 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";
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);
}
});
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.