調整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階段的質量

回答

相關問題