使用createjs/easeljs調整圖像大小

Question

我想使用createjs動態縮小畫布上的某些圖像，然後存儲較小的圖像以在出於性能原因放大畫布時顯示。現在，我使用下面的代碼：

var bitmap = createjs.Bitmap('somefile.png'); 
// wait for bitmap to load (using preload.js etc.) 

var oc = document.createElement('canvas'); 
var octx = oc.getContext('2d'); 
oc.width = bitmap.image.width*0.5; 
oc.height = bitmap.image.height*0.5; 
octx.drawImage(bitmap.image, 0, 0, oc.width, oc.height); 

var dataUrl = oc.toDataURL('image/png'); // very expensive 
var smallBitmap = new createjs.Bitmap(dataUrl); 

這工作，但：轉換爲image/png時，並在實踐中使用過慢

1. 的toDataURL操作是非常昂貴的（和我由於我嘗試過的所有設置的輸出質量不佳，因此無法轉換爲更快的image/jpeg）

2. 當然，必須有一種方法來縮小圖像大小，而不必訴諸單獨的畫布代碼，然後手動進行轉換以繪製到createjs Bitmap對象上？

我也試過：

octx.drawImage(bitmap.image, 0, 0, oc.width, oc.height); 
var smallBitmap = new createjs.Bitmap(oc); 

但是，雖然非常快，這似乎並沒有實際工作（且在任何情況下，我不必每次都創建一個單獨的canvas元素）

我想知道是否有方法可以使用drawImage直接將縮減採樣版本的位圖繪製到createjs位圖實例中，而無需通過單獨的畫布對象或進行轉換字符串？

如果我理解正確，內部這是如何createjs cache屬性工作（即使用drawImage內部寫入DisplayObject），但我無法弄清楚如何使用它自己。

Answer 1

您已使用createjs和easeljs標記此帖子，但您的示例顯示了用於縮放的普通Canvas上下文用法。

您可以使用Bitmap.cache()上的scale參數來獲得所需結果，然後根據需要重新使用cacheCanvas。

// This will create a half-size cache (50%) 
// But scale it back up for you when it displays on the stage 
var bmp = new createjs.Bitmap(img); 
bmp.cache(0, 0, img.width, img.height, 0.5); 

// Pull out the generated cache and use it in a new Bitmap 
// This will display at the new scaled size. 
var bmp2 = new createjs.Bitmap(bmp.cacheCanvas); 

// Un-cache the first one to reset it if you want 
bmp.uncache(); 

這裏是一個小提琴看到它在行動：http://jsfiddle.net/lannymcnie/ofdsyn7g/

注意緩存只是用另一種帆布帶的drawImage規模下來。我絕對會遠離toDataURL，因爲它根本就不表現。