Giải mã hình ảnh bitmap JPEG2000 với Javascript

Question

Tôi đang sử dụng công nghệ HTML5 với FileApi.

Vấn đề của tôi rất đơn giản, nhưng tôi đang tìm kiếm kể từ 2 ngày trước và tôi đã không tìm thấy bất cứ điều gì trên web

Tôi có một DicomFile. Tôi sử dụng FileApi từ HTML5 để chia nhỏ nó và nhận tất cả thông tin. Cuối cùng tôi nhận được dữ liệu hình ảnh trong một mảng byte. Vấn đề là tôi không thể giải mã ảnh JPEG2000 và hiển thị nó trong trình duyệt (Chrome, FireFox, bất kỳ). Ví dụ: nếu dữ liệu hình ảnh được mã hóa ở định dạng JPEG, tôi hoàn toàn không gặp vấn đề gì khi hiển thị hình ảnh trong trình duyệt nhưng vấn đề là với JPEG2000 hoặc JPEG-LS. Tôi biết rằng các định dạng hình ảnh đó không thể hiển thị trong trình duyệt web, nhưng phải tồn tại một thư viện trong Javascript để giải mã dữ liệu hình ảnh có trong JPEG2000 hoặc JPEG-LS. Nó rất quan trọng và tôi là một chút desesperate.

Nếu tôi không thể tìm thấy cách nào để thực hiện việc này, tôi sẽ phải thay đổi tất cả công việc của mình.

Cảm ơn bạn rất nhiều trước

Answer 1

Tôi tin pdf.js dự án có thể giải mã hình ảnh JPEG2000 nén trong một file pdf. Xem số comment và số này tweet.

Hy vọng điều đó sẽ hữu ích.

Answer 2

Vì hình ảnh JPEG 2000 không hiển thị nguyên bản trong trình duyệt, bạn có thể phải chuyển đổi chúng thành thứ mà trình duyệt có thể hiển thị trước khi sử dụng chúng trên trang web. Cách dễ nhất để làm điều này là chỉ cần chuyển đổi phía máy chủ hình ảnh sang một số định dạng an toàn trên web sau đó phân phát các hình ảnh được chuyển đổi sang trình duyệt. Tuy nhiên, nếu bạn quyết tâm thực hiện nó phía khách hàng thì có một ví dụ về việc sử dụng JavaScript để giải mã ảnh JPEG 2000 tại đây: https://github.com/kripken/j2k.js/blob/master/examples/simple.html.

Tính năng này hoạt động bằng cách biên soạn JavaScript của thư viện OpenJPEG, có sẵn here. Đây đây là một chuyển đổi tự động nó không phải là đẹp nhất để sử dụng, nhưng họ cung cấp các chức năng sau đây làm cho nó là sử dụng dễ dàng hơn một chút:

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

Đây data dự kiến ​​sẽ được mảng JavaScript của byte (cũng số JavaScript với các giá trị giữa 0 và 255 bao gồm) như trong số example file. Bạn có thể nhận được điều này bằng cách chuyển đổi hình ảnh sang phía máy chủ biểu mẫu này hoặc Ajaxing chúng và xử lý phản hồi dưới dạng dữ liệu nhị phân (xem MDN's using XHR's về cách thực hiện điều này cho Firefox ít nhất, các trình duyệt khác có thể cần different methods). Đầu ra của hàm này sau đó được đưa vào phần tử Canvas như sau:

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

Vì điều này sử dụng phần tử Canvas có nghĩa là nó sẽ không hoạt động trong IE8, nhưng có thể làm được điều gì khác. Ví dụ: bạn có thể thử nhận dữ liệu hình ảnh được chuyển đổi ở định dạng phù hợp cho bitmap hoặc một số định dạng tương thích IE đơn giản khác, mã hóa base64 sau đó gắn nó vào làm nguồn của phần tử hình ảnh, xem http://css-tricks.com/data-uris/ để biết ví dụ về cách sử dụng dữ liệu url như thế này