আমি একটি ডাটাবেস থেকে একটি ব্লব চিত্র উদ্ধার করছি, এবং আমি জাভাস্ক্রিপ্ট ব্যবহার করে সেই চিত্রটি দেখতে সক্ষম হতে চাই। নিম্নলিখিত কোডটি পৃষ্ঠায় একটি ভাঙা চিত্র আইকন তৈরি করে:
var image = document.createElement('image');
image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
document.body.appendChild(image);
ব্লব সহ প্রয়োজনীয় সমস্ত কোড সম্বলিত একটি জেএসফিডেল এখানে রয়েছে। সম্পূর্ণ কোডটি সঠিকভাবে একটি চিত্র প্রদর্শিত হবে।
document.createElement('img');পরিবর্তে হওয়া উচিত নয়document.createElement('image');?
উত্তর:
আপনি এক্সএমএলএইচটিপিআরকোয়েস্ট থেকে সরাসরি BLOB অবজেক্টটি পেতে পারেন। ফোলাতে প্রতিক্রিয়া টাইপ সেট করা কৌশলটি তৈরি করে। আমার কোডটি এখানে:
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;
}
আমাদের কেবল এইচটিএমএলে একটি খালি চিত্র উপাদান তৈরি করতে হবে:
<img id="image"/>
urlCreator.createObjectURL(blob)যা কোনও চিত্র ইউআরএল দেয় যা একটি চিত্র এসসিআরকে দেওয়া যেতে পারে।
imgট্যাগ ব্যবহার করবেন ; কারণ উভয়ই এসওপি প্রবণ।
আপনি যদি এর পরিবর্তে আনতে চান:
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/ Use_Fetch
if (typeof URL !== "function") {}
কাঁচা ডেটা পেতে আপনি আপনার স্ট্রিংটিকে একটি ইউন্ট 8আরে রূপান্তর করতে পারেন । তারপর একটি তৈরি ব্লব যে ডেটা এবং পাস URL.createObjectURL (ফোঁটা) একটি 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/
আপনার উদাহরণে, আপনার উচিত createElement('img')।
আপনার লিঙ্কে base64blob != Base64.encode(blob),।
এটি কাজ করে, যতক্ষণ না আপনার ডেটা বৈধ হয় http://jsfiddle.net/SXFwP/ (আমার কাছে কোনও বিএমপি চিত্র নেই তাই আমার পিএনজি ব্যবহার করতে হয়েছিল)।
আমার ধারণা আপনার চিত্রের ইনলাইন কোডে আপনার একটি ত্রুটি ছিল। এটা চেষ্টা কর :
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
ফ্রিডলে আপনার ব্লবটি একটি ব্লব নয়, এটি হেক্সাডেসিমাল ডেটার একটি স্ট্রিং প্রতিনিধিত্ব। এটি একটি ব্লব এবং আপনার কাজ করে দেখুন
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)
পড়ুনএসডাটা URL আপনাকে আপনার জন্য ইমেজ উপাদান () উত্স (এসআরসি) এর জন্য একটি বেস 64 এনকোডযুক্ত চিত্র দেবে