비트 맵 캔버스를 인라인하는 방법이 있습니까?

JavaScript 용 온라인 REPL을 Python과 매우 비슷하게 프로그래밍하고 있습니다. 일부 출력물은 텍스트가 아닌 이미지가 될 수 있다는 특징이 있습니다. 예를 들어 명령은 플롯 된 그래프를 반환 할 수 있습니다. 이러한 이미지는 사전 렌더링되어 내부적으로 픽셀 배열로 표현됩니다.비트 맵 캔버스를 인라인하는 방법이 있습니까?

내 의심은 화면에 그 정보를 표시하는 방법입니다. 내 픽셀을 base64로 인코딩하고 인라인 <img/>을 반환해야합니까? 아니면 캔버스에 대한 픽셀 데이터를 인라인하는 방법이 있습니까? (더 빨라질 수 있습니다)?

출처

2013-10-28 MaiaVictor

정확하게 이해한다면 : 캔버스가 아닌 다른 소스에서 가져온 픽셀 배열이 있고 해당 데이터를 캔버스에 표시하고 싶습니까?

수동으로이 픽셀 배열을 PNG 또는 JPEG로 인코딩 한 다음 Base-64로 자바 스크립트에서 상대적으로 느린 프로세스가됩니다.

대신 함수에서 형식화 된 배열을 반환하고 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);

(게시 된 기록 인라인 테스트되지 않음)

예

출처

2013-10-29 05:35:08 K3N

비트 맵 캔버스를 인라인하는 방법이 있습니까?

답변

관련 문제