Question

我需要使用KineticJS将高分辨率图像（约3072x2304）放入基于HTML5 Canvas的界面中，用户可以向其添加文本，然后输出可下载的图像。

但是，我希望画布能够放入典型的显示器中以方便查看。换句话说，我希望显示分辨率小于1024x768。同时，我仍然希望HTML5 Canvas输出图像保持在3072x2304的高分辨率。我在努力实现缩小的显示分辨率而不会降低图像质量。

现在，我要上传一个较小的1024x768文件并牺牲输出质量，否则我不得不在画布上引入滚动条。

如何使其像常规HTML img标记一样工作，浏览器调整图像大小，但源保持高分辨率？

    var stage = new Kinetic.Stage({
    container: 'container',
    width: 1024,
    height: 768,
    });
    imageObj.onload = function() {                          
    var backgroundimg = new Kinetic.Image({
    x: 0,
    y: 0,
    image: imageObj,                                    
    width: 3072,
    height: 2304,
    draggable: false,
    });
    stage.add(backgroundimg);

Answer 1

你刚刚解决了......

将图像加载到javascript图像对象中，然后使用它创建动态图像

imgFull将保持在3072 x 2304（原始大小）
backgroundimg将缩小为1024 x 768

以下是示例代码：

// create the stage

var stage = new Kinetic.Stage({
    container: 'container',
    width: 1024,
    height: 768,
});

// create a layer on the stage

var layer=new Kinetic.Layer();
stage.add(layer);

// create a full sized javascript image object (imgFull)
// and use that to create a Kinetic.Image at 1/3 size (backgroundimg)

var backgroundimg;

var imgFull=new Image();
imgFull.onload=function(){
    backgroundimg=new Kinetic.Image({
        x: 0,
        y: 0,
        image: imageObj,                                    
        width: 1024,
        height: 768,
        draggable: false,
    });
    layer.add(backgroundimg);
}
imgFull.src="yourImage.png";

在不损失质量的情况下调整KineticJS阶段的大小

1 个答案: