本文介绍了KineticJS:如何在KineticJS中减小PNG / JPG图像的质量?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想减小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演示:

  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图像的质量?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-28 16:57