픽셀 색상 배열에서 이미지를 만드는 방법 javascript

Question

이미지 크기가 32 * 32이고 각 픽셀 색상의 배열이 있습니다.이 색상은 빨간색 녹색 파란색 조합입니다 .i 자바 스크립트에서이 배열을 사용하여 이미지를 그려야합니다. 이 정보를 사용하여 이미지를 그리는 방법?

Answer 1

여기서는 픽셀 색상이 모두 16 진수 형식임을 전제로합니다. 그렇지 않은 경우에 당신은 어떻게 든 변환해야합니다 :

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); 

Answer 2

짧은 대답은 당신이 자바 스크립트에서이 작업을 수행하지 말아야한다는 것입니다, 그것은 여러 가지 이유로 서버 운영해야한다. 그러나 당신이하려는 일에 대해 더 많은 세부 사항을 제공해야합니다. 취할 수있는 경로는 다음과 같습니다.

• DIV 블록을 사용하십시오. 이것은 매우 느리고 아마 그것을하는 최악의 방법이지만 이해하는 것이 가장 쉽습니다.
• HTML 캔버스 (또는 캔버스와 유사한 대안, 예 : excanvas)를 사용하십시오. 아마도 가장 단순한 것은 아마 장난감을 초월한 어떤 것에도 가장 유용하지 않다고 생각합니다.
• SVG (또는 RaphaelJS와 같은 것을 통해 SVG와 유사)를 그립니다. 32x32 블록이 꽤 작은 것처럼 보일지라도 이것은 일반적으로 가장 잘 보일 것입니다.
• Flash 또는 Silverlight와 같은 일부 플러그인으로 렌더러와의 인터페이스.

이의이 (크롬 등의 브라우저에 기본 캔버스 명령을 사용하여) 캔버스 방법의 고장을 보자 :

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); 
    } 
}