Javascript로 JPEG2000 비트 맵 이미지 디코드

Question

FileApi와 함께 HTML5 기술을 사용하고 있습니다.

내 문제는 매우 간단합니다,하지만 난 2 일 전부터 찾고 있어요 나는 웹

나는 DicomFile이 아무 것도 발견하지 않았습니다. HTML5의 FileApi를 사용하여 모든 정보를 가져옵니다. 마지막으로 이미지 데이터를 바이트 배열로 가져옵니다. 문제는 JPEG2000 이미지를 디코딩하여 브라우저 (Chrome, FireFox, any)에 표시 할 수 없다는 것입니다. 예를 들어 이미지 데이터가 JPEG 형식으로 코딩 된 경우 브라우저에 이미지를 표시하는 데 전혀 문제가 없지만 JPEG2000 또는 JPEG-LS를 사용하는 것이 문제입니다. JPEG 형식이나 JPEG-LS 형식의 이미지 데이터를 디코딩하려면 Javascript 형식의 라이브러리가 있어야합니다. 그것은 매우 중요하고 나는 조금 바쁘다.

이 작업을 수행 할 방법을 찾지 못하면 모든 작업을 변경해야합니다.

내가 pdf.js 프로젝트가 pdf 파일에 압축 된 JPEG2000 이미지를 디코딩 할 수 있다고 미리

Answer 1

에 대단히 감사드립니다. 이 comment 및이 tweet을 참조하십시오.

희망이 있습니다.

Answer 2

JPEG 2000 이미지는 기본적으로 브라우저에서 렌더링되지 않으므로 웹 페이지에서 사용하기 전에 브라우저에서 렌더링 할 수있는 이미지로 변환해야 할 수 있습니다. 이렇게하는 가장 쉬운 방법은 이미지 서버 측을 웹 안전한 형식으로 변환 한 다음 변환 된 이미지를 브라우저에 제공하는 것입니다. 그러나 클라이언트 측에서이를 수행하기로 결정한 경우 JavaScript를 사용하여 여기에 JPEG 2000 이미지를 디코드하는 예가 있습니다 (https://github.com/kripken/j2k.js/blob/master/examples/simple.html).

이 라이브러리는 OpenJPEG 라이브러리의 JavaScript 컴파일 (here)을 사용하여 작동합니다. 이것은이 그것을 사용하기 좋은 아니에요 자동 변환이지만, 그들은 다음과 같은 기능은 좀 더 쉽게 사용의 수 공급 : 사이의 값으로 바이트 (물론 자바 스크립트 숫자의 자바 스크립트 배열 될 것으로 예상된다 여기서 data

// Wrapper around OpenJPEG.. 
//Converts the given j2k image array to RGB values that 
//can be put into a Canvas.. 
function j2k_to_image(data) { 
    run(); 
    _STDIO.prepare('image.j2k', data); 
    callMain(['-i', 'image.j2k', '-o', 'image.raw']); 
    return _STDIO.streams[_STDIO.filenames['image.raw']].data; 
} 

을 0 및 255 포함). example file과 같습니다. 이미지를이 양식 서버 측으로 변환하거나 Ajaxing하여 응답을 이진 데이터로 처리하면이 정보를 얻을 수 있습니다 (적어도 Firefox의 경우 MDN's using XHR's을 참조하십시오). 다른 브라우저의 경우 different methods이 필요합니다. 이 함수의 출력은 다음과 같이 캔버스 요소에 투입이 이후

output = j2k_to_image([255, 0, 123, ...]); //pass in the JPEG 2000 image as an array 

    var canvas = document.getElementById('canvas'); //get the canvas element (use whatever you actually need here!) 
    canvas.width = imageWidth; 
    canvas.height = imageHeight; 

    var ctx = canvas.getContext('2d'); 
    var image = ctx.getImageData(0, 0, canvas.width, canvas.height); 

    var componentSize = canvas.width*canvas.height; 
    for (var y = 0; y < canvas.height; y++) { 
    for (var x = 0; x < canvas.width; x++) { 
     var value = output[y*canvas.width + x]; 
     var base = (y*canvas.width + x)*4; 
     image.data[base + 0] = output[0*componentSize + y*canvas.width + x]; 
     image.data[base + 1] = output[1*componentSize + y*canvas.width + x]; 
     image.data[base + 2] = output[2*componentSize + y*canvas.width + x]; 
     image.data[base + 3] = 255; //the alpha part.. 
    } 
    } 
    ctx.putImageData(image, 0, 0); 

는 캔버스 요소가이 IE8에서 작동하지 않습니다 의미하지만, 그 것이 다른 뭔가를 할 수 있습니다 사용합니다. 예를 들어 비트 맵 또는 다른 간단한 IE 호환 형식의 올바른 형식으로 변환 된 이미지 데이터를 가져 와서 base64로 인코딩 한 다음 이미지 요소의 소스로 사용하려고 시도 할 수 있습니다 (데이터를 사용하는 방법에 대한 예제는 http://css-tricks.com/data-uris/ 참조). 이런 URL들.