调整KineticJS阶段的质量

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

但是，我希望画布能够适合典型的显示器，以方便观看。换句话说，我希望显示器分辨率小于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);

来源

2014-01-06 user1871471

也许[这个答案]（http://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing）可以给你一些关于如何缩小图像的指针，然后将原理应用于kineticjs。 – K3N

你有没有找到解决方案？ – Chad

你只是有它的工作...

加载镜像到一个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";

来源

2014-01-06 04:25:21 markE

感谢您的快速回复。我应该在原文中更加清楚，但我希望保留用户添加的文本的可拖动性。有没有一种方法可以在不移除可拖动功能的情况下显示更小的东西？ – user1871471

我很困惑。你是否将文本应用到较小的Kinetic图像上，并且想要导出该结果 - 如果是这样，则可以使用stage.toDataURL。如果你想用文本导出较大的图像，你需要在3072x3024 html canvas上绘制较大的图像，然后使用较大的字体和3X [x，y]绘制context.fillText，最后使用canvas.toDataURL导出满尺寸较大的文字图像。无论哪种方式工作 - 请选择！ – markE

调整KineticJS阶段的质量

回答

相关问题