Sử dụng JavaScript để hiển thị Blob

Tôi đang truy xuất hình ảnh Blob từ cơ sở dữ liệu và tôi muốn có thể xem hình ảnh đó bằng JavaScript. Đoạn mã sau tạo ra một biểu tượng hình ảnh bị hỏng trên trang:

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

Đây là một jsFiddle chứa tất cả các mã được yêu cầu, bao gồm cả blob. Mã hoàn thành sẽ hiển thị đúng hình ảnh.

Bạn cũng có thể lấy đối tượng BLOB trực tiếp từ XMLHttpRequest. Đặt responseType thành blob tạo ra mẹo nhỏ. Đây là mã của tôi:

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

Và hàm phản hồi trông như thế này:

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

Chúng ta chỉ cần tạo một phần tử hình ảnh trống trong HTML:

<img id="image"/>

Nếu bạn muốn sử dụng tìm nạp thay thế:

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

Nguồn:

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

Bạn có thể chuyển đổi chuỗi của mình thành Uint8Array để lấy dữ liệu thô. Sau đó, tạo một Blob cho dữ liệu đó và chuyển tới URL.createObjectURL (blob) để chuyển Blob thành một URL mà bạn chuyển tới 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);

Bạn có thể thử ví dụ hoàn chỉnh tại: http://jsfiddle.net/nj82y73d/

Trong ví dụ của bạn, bạn nên làm như vậy createElement('img').

Trong liên kết của bạn base64blob != Base64.encode(blob),.

Điều này hoạt động, miễn là dữ liệu của bạn hợp lệ http://jsfiddle.net/SXFwP/ (Tôi không có bất kỳ hình ảnh BMP nào nên tôi phải sử dụng PNG).

Tôi đoán bạn đã gặp lỗi trong mã nội tuyến của hình ảnh của bạn. Thử đi :

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

Liên kết hữu ích: http://dean.edwards.name/my/base64-ie.html

Vấn đề là tôi có dữ liệu thập lục phân cần được chuyển đổi sang nhị phân trước khi được mã hóa base64.

trong PHP:

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

Trong lần thử nghiệm, đốm màu của bạn không phải là một đốm màu, nó là một chuỗi biểu diễn dữ liệu thập lục phân. Hãy thử điều này trên một đốm màu và bạn đã hoàn thành

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 cung cấp cho bạn hình ảnh được mã hóa base64 sẵn sàng cho bạn phần tử hình ảnh () nguồn (src)