Tạo hình ảnh HTML từ dữ liệu trong biến Javascript

Question

Tôi có dữ liệu hình ảnh (JPEG hoặc PNG) trong biến Javascript. Làm cách nào để hiển thị hình ảnh trong tài liệu HTML? Đây là những hình ảnh rất lớn và mã như thế này không làm việc vì URI quá dài:

// doesn't work because the URI is too long 
$('img#target').attr('src', 'data:...'); 

Sử dụng vải có lẽ là câu trả lời nhưng tôi không thể tìm ra cách để tải nó với các dữ liệu hình ảnh.

Trong trường hợp bạn thắc mắc: không, tôi không thể chỉ tải dữ liệu hình ảnh trực tiếp xuống thẻ img. Nó đến từ máy chủ được mã hóa và được giải mã trong trình duyệt bằng cách sử dụng Javascript.

Cảm ơn,
- Nghệ thuật Z.

Answer 1

Để sử dụng một URL dữ liệu để vẽ trên vải:

var img = new Image; 
img.onload = function(){ 
    myCanvasContext.drawImage(img,0,0); 
}; 
img.src = "data:..."; 

mỗi this question/answer hãy chắc chắn rằng bạn thiết lập onload trước src.

Bạn nói rằng "URI quá dài", nhưng không rõ ý bạn là gì. Chỉ IE8 có giới hạn 32kB trên URI dữ liệu; đối với các trình duyệt khác, nó sẽ hoạt động tốt. Nếu bạn gặp lỗi, vui lòng mô tả nó.

Answer 2

Nó chỉ ra rằng

$('img#target').attr('src', 'data:...'); 

không làm việc trong tất cả ngoại trừ IE. Vấn đề của tôi bắt nguồn từ nơi khác.