การใช้ JavaScript เพื่อแสดง Blob


96

ฉันกำลังดึงภาพ Blob จากฐานข้อมูลและฉันต้องการดูภาพนั้นโดยใช้ JavaScript รหัสต่อไปนี้สร้างไอคอนรูปภาพที่เสียหายบนหน้า:

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

นี่คือ jsFiddleที่มีรหัสทั้งหมดที่จำเป็นรวมถึงหยด รหัสที่สมบูรณ์ควรแสดงภาพอย่างถูกต้อง


รูปแบบของหยดคืออะไร? นี่คือรูปภาพในบางรูปแบบ (jpeg, png, gif ฯลฯ ) หรือแค่ RGB ไบต์
bjornd

5
ไม่ควรใช้document.createElement('img');แทนdocument.createElement('image');?
Pablo Lozano

คำตอบ:


122

คุณยังสามารถรับวัตถุ BLOB ได้โดยตรงจาก XMLHttpRequest การตั้งค่า responseType เป็น 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;
}

เราต้องสร้างองค์ประกอบรูปภาพที่ว่างเปล่าใน HTML:

<img id="image"/>

23
บรรทัดสำคัญคือสิ่งurlCreator.createObjectURL(blob)ที่ส่งคืน imageUrl ซึ่งสามารถกำหนดให้กับ image src ได้
Agent47DarkSoul

7
อย่าลืมเพิกถอน URL ที่สร้างขึ้นเมื่อคุณดำเนินการเสร็จสิ้นโดยการโทร revokeObjectURL
Ralpharoo

ผมอยากสมมติว่าภาพ OP อยู่ในชนิดของข้อมูลบางส่วนในฐานข้อมูลกล่าวคือ OP ไม่สามารถรับมันได้โดยตรง ถ้าเขาทำได้เขามักจะใช้img- แท็กโดยตรงแทนที่จะทำ XHR / ดึงข้อมูล เนื่องจากทั้งสองมีแนวโน้มที่จะ SOP
Christian Ulbrich

78

หากคุณต้องการใช้การดึงข้อมูลแทน:

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


สิ่งนี้จะแปลง base64 โดยอัตโนมัติเนื่องจากรูปภาพถูกเข้ารหัส base64 หรือไม่
P Satish Patro

2
ฉันรักคุณ .. ฉันใช้เวลา 4 ชั่วโมงในการพยายามแก้ไขจนพบสิ่งนี้
tinyCoder

เกิดอะไรขึ้นif (typeof URL !== "function") {}
zanderwar

20

คุณสามารถแปลงสตริงของคุณเป็นUint8Arrayเพื่อรับข้อมูลดิบ จากนั้นสร้างBlobสำหรับข้อมูลนั้นและส่งต่อไปยังURL.createObjectURL (blob)เพื่อแปลง Blob เป็น URL ที่คุณส่งไปยังimg.src 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/


14

createElement('img')ในตัวอย่างของคุณควร

ในลิงค์ของคุณbase64blob != Base64.encode(blob).

ใช้งานได้ตราบเท่าที่ข้อมูลของคุณถูกต้องhttp://jsfiddle.net/SXFwP/ (ฉันไม่มีภาพ BMP เลยต้องใช้ PNG)


จุดที่ดีใน img คุณควรสังเกตว่า 'img' เป็นองค์ประกอบภาพ html โดยที่ 'รูปภาพ' เป็นองค์ประกอบอินพุต html ของประเภทรูปภาพแม้ว่าในกรณีนี้จะไม่สร้างความแตกต่าง ฉันสมมติว่าข้อมูลรูปภาพนั้นถูกต้องเนื่องจากมาจากแหล่งที่มาของบุคคลที่สาม คุณรู้หรือไม่ว่ากำลังทดสอบสิ่งนี้อยู่ หรือไซต์ง่าย ๆ ที่ให้หยดจากภาพที่อัปโหลด? ฉันต้องการทดสอบ BMP
GAgnew

"หยด" ในซอของคุณไม่ใช่ Blob จริงๆ คุณใช้สตริงที่เข้ารหัส base64
elliotwesoff

5

ฉันเดาว่าคุณมีข้อผิดพลาดในโค้ดอินไลน์ของรูปภาพของคุณ ลองสิ่งนี้:

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


3

ปัญหาคือฉันมีข้อมูลเลขฐานสิบหกที่ต้องแปลงเป็นไบนารีก่อนที่จะถูกเข้ารหัส base64

ใน PHP:

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

0

ในเสียงซอของคุณหยดไม่ใช่หยด แต่เป็นการแสดงสตริงของข้อมูลเลขฐานสิบหก ลองใช้สิ่งนี้กับหยดและทำเสร็จแล้ว

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 ให้ภาพที่เข้ารหัส base64 พร้อมสำหรับองค์ประกอบภาพ () ซอร์ส (src)

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.