js 获取图片

// 使用 JavaScript 获取图片的方法有很多，以下是几种常见的方法：

// 方法 1: 使用 HTMLImageElement (new Image())
function getImage(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = (err) => reject(err);
        img.src = url;
    });
}

// 示例：获取一张图片并插入到页面中
const imageUrl = 'https://example.com/image.jpg';
getImage(imageUrl)
    .then(img => {
        document.body.appendChild(img); // 将图片添加到页面中
    })
    .catch(err => console.error('加载图片失败:', err));

// 方法 2: 使用 fetch API 获取图片的 Blob 数据
async function getBlobImage(url) {
    try {
        const response = await fetch(url);
        const blob = await response.blob();
        const img = new Image();
        img.src = URL.createObjectURL(blob);
        return img;
    } catch (error) {
        console.error('加载图片失败:', error);
    }
}

// 示例：获取图片的 Blob 数据并插入到页面中
getBlobImage(imageUrl)
    .then(img => {
        document.body.appendChild(img); // 将图片添加到页面中
    });

// 方法 3: 使用 XMLHttpRequest 获取图片数据
function getXhrImage(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function() {
            if (this.status === 200) {
                const img = new Image();
                img.src = URL.createObjectURL(this.response);
                resolve(img);
            } else {
                reject(new Error('请求失败'));
            }
        };
        xhr.onerror = () => reject(new Error('网络错误'));
        xhr.send();
    });
}

// 示例：使用 XMLHttpRequest 获取图片并插入到页面中
getXhrImage(imageUrl)
    .then(img => {
        document.body.appendChild(img); // 将图片添加到页面中
    })
    .catch(err => console.error('加载图片失败:', err));

解释说明：

1. new Image()：这是最常用的方式，通过创建一个新的 HTMLImageElement 对象来加载图片。当图片加载完成时，可以通过 img.onload 事件处理程序来操作图片。

2. fetch API：fetch 是现代浏览器提供的一个用于发起网络请求的 API。通过 fetch 可以获取图片的二进制数据（Blob），然后使用 URL.createObjectURL 创建一个临时的 URL 来显示图片。

3. XMLHttpRequest：这是一种较老的方式，但仍然可以在某些情况下使用。它允许你通过设置 responseType 为 blob 来获取图片的二进制数据，并通过 URL.createObjectURL 显示图片。

以上三种方法都可以根据具体需求选择使用。