2012-02-15 4 views
12

के साथ जेपीईजी 2000 बिटरैरे छवि डीकोड मैं फ़ाइल एपीआई के साथ एचटीएमएल 5 तकनीक का उपयोग कर रहा हूं।जावास्क्रिप्ट

मेरे समस्या बहुत सरल है, लेकिन मैं के बाद से 2 दिन पहले खोज रहा हूँ और मैं वेब

मैं एक DicomFile है पर कुछ भी नहीं मिल रहे हैं। मैं इसे तोड़ने के लिए HTML5 से FileApi का उपयोग करता हूं, और सभी जानकारी प्राप्त करता हूं। अंततः मुझे एक बाइट सरणी में छवि डेटा मिलता है। समस्या यह है कि मैं एक JPEG2000 छवि को डीकोड नहीं कर सकता और इसे ब्राउज़र (क्रोम, फ़ायरफ़ॉक्स, किसी भी) में दिखा सकता हूं। उदाहरण के लिए, यदि छवि डेटा जेपीईजी प्रारूप में कोड किया गया है, तो ब्राउज़र में छवि दिखाने के लिए मुझे कोई समस्या नहीं है, लेकिन समस्या जेपीईजी 2000 या जेपीईजी-एलएस के साथ है। मुझे पता है कि वे छवि प्रारूप वेब ब्रोवर में दिखाने में सक्षम नहीं हैं, लेकिन यह जेपीईजी 2000 या जेपीईजी-एलएस में छवि डेटा को डीकोड करने के लिए जावास्क्रिप्ट में एक पुस्तकालय मौजूद होना चाहिए। यह बहुत महत्वपूर्ण है और मैं थोड़ी निराशाजनक हूं।

अगर मुझे ऐसा करने का कोई तरीका नहीं मिल रहा है, तो मुझे अपना पूरा काम बदलना होगा।

अग्रिम

उत्तर

6

में आपको बहुत बहुत धन्यवाद मेरा मानना ​​है कि pdf.js परियोजना एक PDF फ़ाइल में संपीड़ित JPEG2000 छवियों को डिकोड कर सकते हैं। यह comment और यह tweet देखें।

उम्मीद है कि यह मदद करता है।

14

चूंकि जेपीईजी 2000 छवियां ब्राउज़र में मूल रूप से प्रस्तुत नहीं होती हैं, इसलिए आपको शायद उनको कुछ रूपांतरित करना होगा जो ब्राउज़र वेब पेज पर उनका उपयोग करने से पहले प्रस्तुत कर सकते हैं। ऐसा करने का सबसे आसान तरीका छवियों को सर्वर की ओर से कुछ वेब-सुरक्षित प्रारूप में परिवर्तित करना होगा, फिर परिवर्तित छवियों को ब्राउज़र में सेवा दें। हालांकि, यदि आप इसे क्लाइंट साइड करने के लिए निर्धारित हैं, तो यहां जेपीईजी 2000 छवियों को डीकोड करने के लिए जावास्क्रिप्ट का उपयोग करने का एक उदाहरण है: https://github.com/kripken/j2k.js/blob/master/examples/simple.html

यह OpenJPEG लाइब्रेरी के जावास्क्रिप्ट संकलन का उपयोग करके काम करता है, उपलब्ध here। यह इस एक स्वचालित बातचीत में यह सबसे अच्छा उपयोग करने के लिए नहीं है, लेकिन वे निम्नलिखित समारोह में यह थोड़ा आसान उपयोग में आता है आपूर्ति:

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

यहाँ data बाइट (अच्छी तरह से जावास्क्रिप्ट संख्या के JavaScript श्रृंखला होने की उम्मीद है के बीच मूल्यों के साथ 0 और 255 समावेशी) example file में। आप छवियों को इस रूप में सर्वर पक्ष में परिवर्तित करके प्राप्त कर सकते हैं, या इन्हें अजाक्स कर सकते हैं और बाइनरी डेटा के रूप में प्रतिक्रिया का इलाज कर सकते हैं (कम से कम फ़ायरफ़ॉक्स के लिए इसे कैसे करें, 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 में काम नहीं करेगा, लेकिन उस के लिए यह कुछ और करने के लिए संभव हो सकता है। उदाहरण के लिए, आप बिटमैप या किसी अन्य साधारण आईई संगत प्रारूप के लिए परिवर्तित प्रारूप में परिवर्तित छवि डेटा प्राप्त करने का प्रयास कर सकते हैं, बेस 64 एन्कोडिंग इसे फिर छवि तत्व के स्रोत के रूप में चिपकाकर, http://css-tricks.com/data-uris/ डेटा का उपयोग करने के उदाहरणों के उदाहरण देखें इस तरह के यूआरएल।

+0

बहुत बहुत धन्यवाद! मैंने जावास्क्रिप्ट लाइब्रेरी (J2K.js) की कोशिश की है और सही काम किया है! समस्या केवल छवि के साथ थी, जहां आकार 1 एमबी से कम है, यदि आकार अधिक है तो यह काम नहीं करेगा। क्योंकि हम डीआईसीओएम छवि (जे 2 के में 5 एमबी आकार) का उपयोग कर रहे हैं, यह हमारे लिए ठीक काम नहीं करता है। लेकिन मैं AJAX का उपयोग करने की कोशिश करूंगा। एक बार फिर धन्यवाद। – user1211709

+1

कोई समस्या नहीं है। आशा है कि आप इसे ठीक करने में कामयाब रहे! वैसे, अगर आपको यह उपयोगी लगता है, तो इसे अप-वोट करने का अच्छा अभ्यास है! ;-) –

+0

कृपया ध्यान दें कि j2k.js लाइब्रेरी का URL बदल गया है।मैंने जवाब संपादित किया, लेकिन मुझे संदेह है कि अभी भी काम करना है। –

संबंधित मुद्दे