javascript 加载图片144

在 JavaScript 中，可以通过多种方式加载图片，每种方式都有其特定的用例和优点。以下是一些最常用的方法：

1. 使用 Image 对象

Image 对象是 JavaScript 中表示图像的内置对象。要使用它加载图像，可以执行以下步骤：
创建一个新的 Image 对象。
设置 Image 对象的 src 属性以指向图像的 URL。
使用 Image 的 onload 事件侦听器，当图像加载完成时执行代码。

const image = new Image();
= '/';
= function() {
// 当图像加载完成后执行的代码
};

这种方法的优点是简单易用，并且与所有现代浏览器兼容。但是，它无法控制图像的加载时机，而且在图像加载完成之前无法访问图像数据。

2. 使用 XMLHttpRequest

XMLHttpRequest 对象允许您与服务器进行 HTTP 请求。要使用它加载图像，可以执行以下步骤：
创建一个新的 XMLHttpRequest 对象。
设置 XMLHttpRequest 的 open() 方法以使用 GET 请求指向图像的 URL。
设置 XMLHttpRequest 的 responseType 属性为 "arraybuffer"。
使用 XMLHttpRequest 的 onload 事件侦听器，当图像加载完成时执行代码。

const xhr = new XMLHttpRequest();
('GET', '/');
= 'arraybuffer';
= function() {
if ( === 200) {
const arrayBuffer = ;
// 将 arrayBuffer 转换为图像数据
const imageData = new Blob([arrayBuffer]);
// 创建一个新的 Image 对象并设置其 src 属性
const image = new Image();
= (imageData);
}
};
();

这种方法提供了对图像加载时机的控制，并允许您访问图像数据。然而，它在某些浏览器中不受支持，并且需要更多的代码才能实现。

3. 使用 fetch() API

fetch() API 是一个现代化的 HTTP 请求 API。要使用它加载图像，可以执行以下步骤：
调用 fetch() 方法，传递图像的 URL。
使用 fetch() 返回的 Promise，并使用 .arrayBuffer() 方法获取图像数据。
将 arrayBuffer 转换为图像数据。
创建一个新的 Image 对象并设置其 src 属性。

fetch('/')
.then(response => ())
.then(arrayBuffer => {
const imageData = new Blob([arrayBuffer]);
const image = new Image();
= (imageData);
})
.catch(error => {
// 处理错误
});

这种方法提供了与 XMLHttpRequest 相同的优点，并且与所有现代浏览器兼容。