एक बूँद प्रदर्शित करने के लिए जावास्क्रिप्ट का उपयोग करना

Question 1

मैं एक डेटाबेस से एक ब्लॉब छवि प्राप्त कर रहा हूं, और मैं जावास्क्रिप्ट का उपयोग करके उस छवि को देखने में सक्षम होना चाहता हूं। निम्न कोड पृष्ठ पर एक टूटी हुई छवि आइकन बनाता है:

var image = document.createElement('image');
    image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
    document.body.appendChild(image);

यहाँ एक jsField है जिसमें आवश्यक सभी कोड हैं, जिसमें बूँद भी शामिल है। पूर्ण कोड को ठीक से एक छवि प्रदर्शित करनी चाहिए।

Question 2

आप सीधे XMLHttpRequest से BLOB ऑब्जेक्ट भी प्राप्त कर सकते हैं। Blob को responseType सेट करना ट्रिक बनाता है। यहाँ मेरा कोड है:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/image.jpg");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();

और प्रतिक्रिया समारोह इस तरह दिखता है:

function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   document.querySelector("#image").src = imageUrl;
}

हमें बस HTML में एक खाली छवि तत्व बनाना है:

<img id="image"/>

Question 3

यदि आप इसके स्थान पर भ्रूण का उपयोग करना चाहते हैं:

var myImage = document.querySelector('img');

fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

स्रोत:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Question 4

आप कच्चे डेटा को प्राप्त करने के लिए अपने स्ट्रिंग को Uint8Array में बदल सकते हैं । फिर उस डेटा के लिए एक बूँद बनाएँ और URL.reateObjectURL (बूँद) को पास करें ताकि बूँद को एक URL में परिवर्तित किया जा सके जिसे आप img.src पर भेजते हैं ।

var data = '424D5E070000000000003E00000028000000EF...';

// Convert the string to bytes
var bytes = new Uint8Array(data.length / 2);

for (var i = 0; i < data.length; i += 2) {
    bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
}

// Make a Blob from the bytes
var blob = new Blob([bytes], {type: 'image/bmp'});

// Use createObjectURL to make a URL for the blob
var image = new Image();
image.src = URL.createObjectURL(blob);
document.body.appendChild(image);

आप पूरा उदाहरण यहाँ देख सकते हैं: http://jsfiddle.net/nj82y73d/

Question 5

अपने उदाहरण में, आपको करना चाहिए createElement('img')।

अपने लिंक में, base64blob != Base64.encode(blob)।

यह तब तक काम करता है, जब तक आपका डेटा http://jsfiddle.net/SXFwP/ मान्य होता है (मेरे पास कोई BMP चित्र नहीं था इसलिए मुझे PNG का उपयोग करना पड़ा)।

Question 6

मुझे लगता है कि आपको अपनी छवि के इनलाइन कोड में एक त्रुटि हुई थी। इसे इस्तेमाल करे :

var image = document.createElement('img');
    
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
    
image.width=100;
image.height=100;
image.alt="here should be some image";
    
document.body.appendChild(image);

स्निपेट का विस्तार करें

सहायक लिंक: http://dean.edwards.name/my/base64-ie.html

Question 7

समस्या यह थी कि मेरे पास हेक्साडेसिमल डेटा था जिसे बेस 64 सेंकड होने से पहले बाइनरी में बदलना आवश्यक था।

PHP में:

base64_encode(pack("H*", $subvalue))

Question 8

फिडेल में आपका बूँद बूँद नहीं है, यह हेक्साडेसिमल डेटा का एक स्ट्रिंग प्रतिनिधित्व है। एक बूँद और अपने किए पर यह कोशिश करो

var image = document.createElement('img');
let reader=new FileReader()
reader.addEventListener('loadend',()=>{
  let contents=reader.result
  image.src = contents
  document.body.appendChild(image);
})
if(blob instanceof Blob) reader.readAsDataURL(blob)

readAsDataURL आपको छवि तत्व () स्रोत (src) के लिए तैयार एक base64 एन्कोडेड छवि देता है