Uint16Array의 데이터를 Javascript/HTML5로 이미지로 표시하는 방법은 무엇입니까?

DICOM 파일에서 이미지 데이터를 표시하려고합니다. 파일을 구문 분석하고 16 비트 그레이 스케일 이미지를 Uint16Array로 추출했습니다. 이 텍스처를 WebGL에 텍스처로 전달하려는 경우 편리한 형식이라고 생각하지만이 텍스처를 캔버스에 붙여 넣으려고하면 어떻게해야합니까?Uint16Array의 데이터를 Javascript/HTML5로 이미지로 표시하는 방법은 무엇입니까?

감사합니다.

출처

2014-10-24 xperien

putImageData를 사용하면 작업을 완료 할 수 있습니다. – GameAlchemist

팁 주셔서 감사. 지금은 새로운 Uint8ClampedArray를 만들고 루프를 실행하여 Uint16Array의 모든 데이터를 새 Array에 저장합니다. 그런 다음 putImageData 함수를 사용하여 캔버스에 붙여 넣습니다. 루프가 꽤 비싸기 때문에 이것이 유일한 방법인지 아십니까? – xperien

답변이 있으니 아래에 게시해야합니다. 가능한 개선이 있는지 확인할 것입니다. 배열에 Uint32 뷰를 가져 와서 바이트 4를 4로 처리하면 (var view32 = new Uint32Array (imgdata.data.buffer)) 작업 속도가 빨라지는지 궁금합니다. (그러나 이것은 FF에서 작동하지 않을 것입니다 ...) 그리고 단 한번의 imgData 생성을 잊지 말고 다시 사용하십시오. 생성은 매우 길다. – GameAlchemist

감사합니다. @GameAlchemist.

이 기능이 저에게 효과가있는 것으로 나타났습니다.

// get the image data (16 bit unsigned array of intensities) from the ArrayBuffer 
pixelData = new Uint8Array(arraybuffer, frameOffset, numPixels); 

// set up canvas 
var imageCanvas = document.getElementById('canvas_1'); 
imageCanvas.setAttribute("width", rows); 
imageCanvas.setAttribute("height", columns); 
var ctx = imageCanvas.getContext('2d'); 

// imageData is Uint8ClampedArray 
var imageData = ctx.getImageData(0, 0, imageCanvas.width, imageCanvas.height); 

// this part seems slow :( 
for(var i = 0; i < numPixels; i++) { 
    imageData.data[4*i] = (pixelData[i]*255)/4095; 
    imageData.data[4*i+1] = (pixelData[i]*255)/4095; 
    imageData.data[4*i+2] = (pixelData[i]*255)/4095; 
    imageData.data[4*i+3] = 255; 
} 

ctx.putImageData(imageData, 0, 0);

위의 내용은 완벽하게 작동합니다.

더 빠를 수있는 것이 누락 되었습니까?

출처

2014-10-28 01:05:48 xperien

Uint16Array의 데이터를 Javascript/HTML5로 이미지로 표시하는 방법은 무엇입니까?

답변

관련 문제