Lưu hình ảnh trong đối tượng Javascript

Question

Tôi không chắc nếu điều này có thể, nhưng tôi muốn lưu trữ hình ảnh trong biến JavaScript hoặc đối tượng và khi tải trang, tôi muốn làm cho những hình ảnh đó xuất hiện ở nơi mong muốn.

Tôi muốn biết một số hình ảnh có được chuyển đổi thành dạng nhị phân hay không. Chúng có thể được chuyển đổi trở lại hình ảnh bằng JavaScript không?

Answer 1

Dường như OP yêu cầu cách thực hiện các đảo dữ liệu bằng JavaScript, đặc biệt cho hình ảnh. Không có câu trả lời nào được đưa ra trước đây cung cấp một phương pháp như vậy, vì vậy ở đây bạn đi.

Về cơ bản, bạn mã hóa hình ảnh dưới dạng chuỗi base64 và sau đó đặt đó làm nguồn của phần tử DOM. Đặt nguồn của đối tượng Image thành url không tương đương, vì nó yêu cầu kết nối HTTP bổ sung.

var data = 'data:image/gif;base64,'+ 
    'R0lGODlhAAEwAMQAAJ2M5Me98GRK1DoYyYBr3PHv++Pe99XO81Y50auc6PBkZEgpzbmt7HJa2I57'+ 
      // snip // 
    'fS3CqU7XGYgE+GqHvrLJ8Tr6qXmqiwAF9CffgnMNqmWHAWNBwwGsKpKsrmJqltOOV69nuYxSkqpo'+ 
    'Tata18rWtrr1rTIIAQA7'; 
var icon_elem = document.getElementById("icon_here"); 
icon_elem.src = data; 

Đoạn mã trên và một ví dụ đầy đủ có thể được tìm thấy ở đây: http://www.kawa.net/works/js/data-scheme/base64-e.html

Answer 2

Bạn chỉ có thể sử dụng

var img = new Image(); 
img.src = "http://yourimage.jpg"; 

để tạo ra một hình ảnh DOM.

Hình ảnh DOM là một đối tượng trong bộ nhớ chứa biểu mẫu nhị phân hình ảnh, vì vậy không cần phải chuyển đổi hình ảnh trở lại hình ảnh vì nó đã là hình ảnh.

Answer 3

Hãy xem, đây là một vấn đề đơn giản. Nhưng phương pháp tiếp cận vấn đề này không phải là cách bạn đang cố gắng ngay bây giờ.

Những gì bạn nghĩ sẽ hoạt động:
Chúng tôi sẽ lưu trữ hình ảnh (dữ liệu nhị phân) trong biến js và sau đó tát nó trên trang bất kỳ lúc nào.

Cách thức hoạt động sẽ dễ dàng hơn nhiều:
bạn chỉ cần tạo hình ảnh DOM trên trang và đặt nguồn của nó. Trình duyệt sẽ tự động tìm nạp hình ảnh từ máy chủ.

Ví dụ:

cũ 1:

var img_src = "http://someserver/yourimage.png"; 
var node = document.getElementById('the-node-in-which-i-want-my-image'); 
node.innerHTML = "<img src='"+img_src+"' alt='my image'>"; 

cũ 2: (sử dụng jquery) - điều này về cơ bản là tương tự như trên, chỉ dễ dàng hơn nhiều để viết:

var img_src = "http://someserver/yourimage.png"; 
$('#the-node-in-which-i-want-my-image') 
    .html("<img src='"+img_src+"' alt='my image'>"); 

Bây giờ, có một điều nữa: trình duyệt bắt đầu tìm nạp hình ảnh sau khi mã này chạy, vì vậy hình ảnh thực sự xuất hiện một chút sau khi bạn chèn nó vào D OM.

Để tránh điều này, bạn có thể trước khi lấy những hình ảnh sử dụng:

var prefetch = new Image(); 
prefetch.src = "http://someserver/yourimage.png"; 

Cheers!