HTMLImageElement: decode() method

Cú pháp

decode()

Thông số

Không có.

Giá trị trả về

Promise đáp ứng undefined khi dữ liệu hình ảnh đã sẵn sàng để sử dụng.

Ngoại lệ

EncodingError DOMException

Đã xảy ra lỗi khi giải mã hình ảnh. Điều này có thể xảy ra nếu:

• Yêu cầu không thành công
• Yêu cầu hình ảnh đã thay đổi sau khi gọi decode() (ví dụ: bằng cách thay đổi src)
• Dữ liệu của hình ảnh bị hỏng

Ví dụ

Cách sử dụng cơ bản

Ví dụ sau đây cho thấy cách sử dụng phương thức decode() để kiểm soát khi nào một hình ảnh được thêm vào DOM.

const img = new Image();
img.src = "nebula.jpg";
img
  .decode()
  .then(() => {
    document.body.appendChild(img);
  })
  .catch((encodingError) => {
    // Do something with the error.
  });

Tránh hình ảnh trống

Trong ví dụ bên dưới, bạn có thể sẽ thấy một hình ảnh trống hiển thị trên trang khi hình ảnh được tải xuống:

const img = new Image();
img.src = "img/logo.png";
document.body.appendChild(img);

Việc sử dụng decode() sẽ trì hoãn việc chèn hình ảnh vào DOM cho đến khi nó được tải xuống và giải mã đầy đủ, từ đó tránh được vấn đề hình ảnh trống:

async function getImage() {
  const img = new Image();
  img.src = "img/logo.png";
  await img.decode();
  document.body.appendChild(img);
  const p = document.createElement("p");
  p.textContent = "Image is fully loaded!";
  document.body.appendChild(p);
}

Điều này đặc biệt hữu ích nếu bạn đang tự động hoán đổi một hình ảnh hiện có cho một hình ảnh mới và cũng ngăn không cho các phần sơn không liên quan bên ngoài mã này bị giữ lại trong khi hình ảnh đang được giải mã. Ví dụ: trong album ảnh trực tuyến, ban đầu bạn có thể hiển thị hình thu nhỏ có độ phân giải thấp, sau đó thay thế hình ảnh đó bằng hình ảnh có độ phân giải đầy đủ bằng cách tạo một HTMLImageElement mới, đặt nguồn của nó thành URL của hình ảnh có độ phân giải đầy đủ, sau đó sử dụng decode() để nhận được lời hứa được giải quyết sau khi hình ảnh có độ phân giải đầy đủ sẵn sàng để sử dụng. Vào thời điểm đó, bạn có thể thay thế hình ảnh có độ phân giải thấp bằng hình ảnh có độ phân giải đầy đủ hiện có.

Thông số kỹ thuật

Khả năng tương thích của trình duyệt

Xem thêm

• Thuộc tính giải mã hình ảnh thực chất có tác dụng gì? trên tunetheweb.com (2023)
• Thuộc tính HTMLImageElement.decoding