Làm cách nào để hiển thị hình ảnh được lưu trữ dưới dạng mảng byte trong HTML / JavaScript? [đóng cửa]

Tôi đang viết một trang web bằng HTML / JavaScript. Tôi đang tải xuống một hình ảnh từ chương trình phụ trợ của mình bằng AJAX. Hình ảnh được biểu thị dưới dạng mảng byte thô, không phải URL, vì vậy tôi không thể sử dụng <img src="{url}">phương pháp tiếp cận chuẩn .

Làm cách nào để hiển thị hình ảnh được đề cập cho người dùng?

Hãy thử đặt đoạn mã HTML này vào tài liệu được cung cấp của bạn:

<img id="ItemPreview" src="">

Sau đó, về phía JavaScript, bạn có thể tự động sửa đổi srcthuộc tính của hình ảnh với cái gọi là URL dữ liệu .

document.getElementById("ItemPreview").src = "data:image/png;base64," + yourByteArrayAsBase64;

Ngoài ra, sử dụng jQuery:

$('#ItemPreview').attr('src', `data:image/png;base64,${yourByteArrayAsBase64}`);

Điều này giả định rằng hình ảnh của bạn được lưu trữ ở định dạng PNG, khá phổ biến. Nếu bạn sử dụng một số định dạng hình ảnh khác (ví dụ: JPEG), hãy sửa đổi ( một phần) kiểu MIME"image/..." trong URL cho phù hợp.

Các câu hỏi tương tự:

• Hiển thị một mảng byte dưới dạng hình ảnh bằng JavaScript

• Hiển thị các byte dưới dạng hình ảnh trên trang .aspx

• 'data: image / jpg; base64' và bản xem trước hình ảnh jQuery trong Internet Explorer

• Chuyển đổi từ dữ liệu nhị phân sang điều khiển hình ảnh trong ASP.NET

• Làm thế nào để chuyển đổi một mảng byte thành một hình ảnh?