有沒有一種內嵌位圖畫布的方法？

Question

我正在編寫一個在線REPL for JavaScript，就像Python的在線REPL一樣。它的一個特點是一些輸出可以是圖像，而不僅僅是文本。例如，一個命令可能會返回一個繪製圖。這些圖像被預先渲染並在內部表示爲像素陣列。

我的疑問是如何在屏幕上顯示該信息。我應該將像素編碼爲base64，返回一個內嵌的<img/>？或者是否有一種方法可以爲畫布內嵌像素數據（這可能會更快）？

Answer 1

如果我的理解正確：您有一個像素數組來自與畫布不同的來源，並且您希望將這些數據繪製到畫布上？

若要手動先將此像素數組編碼爲PNG或JPEG，然後將其轉換爲Base-64，則在JavaScript中的處理速度相對較慢。

相反，您可以從函數返回一個類型數組，然後在其上使用Uint32Array視圖，然後使用上下文對象上的createImageData將其數據循環複製到畫布上的數組中。

與所有的位圖一樣，你的函數也需要返回寬度和高度，所以你的函數應該最優地返回一個引用數組的對象，除非事先總是知道尺寸。

例如：

/// some function returning a bitmap/pixel array 
function getSomeImageData() { 

    ... 
    return { 
     width: width, 
     height: height, 
     bitmap: myTypedArray 
    } 
} 

然後，在複製過程：

/// get the result from the function 
var o = getSomeImageData(); 

/// create an empty bitmap 
var img = context.createImageData(o.width, o.height); 

/// create unsigned 32-bit views for the typed arrays 
var dst = new Uint32Array(img.data.buffer); 
var src = new Uint32Array(o.bitmap); 

/// copy using 32-bits integers 
var i = src.length; 
while(i--) dst[i] = src[i]; 

/// put image onto the canvas 
context.putImageData(img, 0, 0); 

（聲明：寫入直列，未測試）