KineticJS：如何在KineticJS中减小PNG / JPG图像的质量？ [英] KineticJS: How do I downsize a PNG/JPG Image in KineticJS maintaining high Quality?

问题描述

我想减小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，
}）; 
 
 //将形状添加到图层
 layer.add（someImage）; 
 
 //将层添加到阶段
 stage.add（layer）; 
 
 someImage.scale（{
 x：500，
 y：500 
}）; 
 layer.draw（）; 
}; 
 imageObj.src = // some image; 
  

解决方案

下面是一个函数，它接受源图像（或画布）并缩小比例：

  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函数可以像这样用来缩小非常大的图像： / p>

A演示： http://jsfiddle.net/m1erickson / zYLLe /

  var img = new Image（）; 
 img.onload = start; 
 img.src =hugeImage.png; 
 function start（）{
 
 // c1是0.50 img的大小
 
 var c1 = scaleImage（img，0.50）; 
 
 // c2是0.50的大小c1（==原始img的25％）
 
 var c2 = scaleImage（c1,0.50）; 
 
 //然后使用c2作为源创建一个Kinetic.Image 
 
 image1 = new Kinetic.Image（{
x：10，
y： 10，
 image：c2，
 draggable：true 
}）; 
 layer.add（image1）; 
 layer.draw（）; 
} 
  

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: '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;

解决方案

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:

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

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

这篇关于KineticJS：如何在KineticJS中减小PNG / JPG图像的质量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！