我希望在不影响质量的情况下缩小KineticJS中PNG / JPG图像的尺寸。
我做了以下但是导致质量很差:
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 1000
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function () {
var someImage = new Kinetic.Image({
image: imageObj,
});
// add the shape to the layer
layer.add(someImage);
// add the layer to the stage
stage.add(layer);
someImage.scale({
x: 500,
y: 500
});
layer.draw();
};
imageObj.src = // some image;
答案 0 :(得分:1)
通过以递增方式缩小图像,可以获得良好的效果。
这是一个获取源图像(或画布)并将其缩小的函数:
function scaleImage(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);
}
scaleImage函数可以像这样用来缩小非常大的图像:
演示: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 img
var 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();
}