如何從像素顏色數組中創建一個圖像javascript

我有圖像大小32 * 32，並有每個像素顏色的數組。這種顏色是紅色綠色藍色的組合。我想在JavaScript中使用此數組繪製圖像。如何使用此信息繪製圖像？如何從像素顏色數組中創建一個圖像javascript

2011-08-19 user894554

有好的方法，現在做到這一點。請參閱http://stackoverflow.com/questions/13416800/how-to-generate-an-image-from-imagedata-in-javascript。 –

這假設你的像素顏色都是十六進制格式。如果不是，你需要給他們以某種方式轉換：

var imgData = [ /* your array of pixel colors */ ], 
    img = document.createElement('div'), 
    i = 0, l = imgData.length, 
    pixel; 
img.style.cssText = 'overflow:hidden; width:32px; height:32px'; 
while (i < l) { 
    pixel = document.createElement('div'); 
    pixel.style.cssText = 
     'float:left; width:1px; height:1px; background-color:#' + imgData[i]; 
    img.appendChild(pixel); 
    i += 1; 
} 
document.body.appendChild(img);

來源

2011-08-19 06:00:51 sdleihssirhc

-1之前多久？ – sdleihssirhc

它是一個錯誤的答案。使用imageData的Canvas是正確的方法。 –

簡短的回答是，你不應該在JavaScript中做到這一點，因爲它應該是有多種原因的服務器操作。但是，您需要提供有關您要做什麼的更多詳細信息。有多種路線可供選擇：

使用DIV塊。這很慢，可能是最糟糕的做法，但它可能是最容易理解的。
使用HTML畫布（或類似畫布的替代方法，如excanvas）。可能是下一個最簡單的，儘管我認爲它對玩具以外的任何東西都是最不有用的。
在SVG中繪製一些東西（或像RaphaelJS那樣的類SVG）。儘管32x32塊看起來很小，但這看起來是最好的。
與內置Flash或Silverlight等插件的渲染器的接口。

讓我們在畫布方法的分解（使用本機命令油畫像的Chrome瀏覽器）：

var drawingCanvas = document.getElementById('myDrawing'); 
if(!drawingCanvas.getContext) 
{ 
    return; 
} 
var context = drawingCanvas.getContext('2d'); 
var pixSize = 1; 
for (var i=0; i < rows.length; i++) 
{ 
    var col = rows[i]; 
    for (var j=0; j < col.length; j++) 
    { 
     context.fillStyle = col[j]; // assumes the data is in #hex format already. 
     context.fillRect(j*pixSize,i*pixSize,pixSize,pixSize); 
    } 
}

來源

2011-08-19 06:08:57

如何從像素顏色數組中創建一個圖像javascript

回答

相關問題