js怎么下载图片

一、通过创建临时链接标签

通过创建临时链接标签并触发其下载行为，你可以轻松实现图片的下载。以下是具体步骤及代码示例：

1. 创建临时链接标签

function downloadImage(url, filename) {

    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

2. 使用示例

调用上述函数，并传递图片的URL和文件名。如下所示：

const imageUrl = 'https://example.com/image.jpg';

const filename = 'downloaded_image.jpg';
downloadImage(imageUrl, filename);

这个方法的优点是简单易用且兼容性好，但它可能无法处理跨域图片下载的问题。

二、使用Canvas将图片转化为Blob对象

使用Canvas可以将图片转化为Blob对象，然后通过创建临时链接标签下载图片。此方法适用于需要处理跨域图片或需要对图片进行处理的情况。

1. 将图片绘制到Canvas上

首先，创建一个Canvas元素，并将图片绘制到Canvas上。

function convertImageToBlob(url) {

    return new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = 'Anonymous';
        img.src = url;
        img.onload = () => {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            canvas.toBlob(resolve);
        };
        img.onerror = reject;
    });
}

2. 下载Blob对象

将Blob对象创建为临时链接，并触发下载。

function downloadBlob(blob, filename) {

    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
}

3. 使用示例

将上述两个函数结合使用，下载图片。

const imageUrl = 'https://example.com/image.jpg';

const filename = 'downloaded_image.jpg';
convertImageToBlob(imageUrl)
    .then(blob => downloadBlob(blob, filename))
    .catch(console.error);

这种方法可以处理跨域问题，但需要更多的代码和处理逻辑。

三、使用Fetch API下载图片数据

Fetch API允许你以流的形式下载图片数据，并将其转换为Blob对象，然后通过创建临时链接标签下载图片。

1. 使用Fetch API获取图片数据

使用Fetch API获取图片数据，并将其转换为Blob对象。

async function fetchImageAsBlob(url) {

    const response = await fetch(url, { mode: 'cors' });
    return await response.blob();
}

2. 下载Blob对象

与之前的方法类似，使用Blob对象创建临时链接并下载图片。

function downloadBlob(blob, filename) {

    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
}

3. 使用示例

将上述两个函数结合使用，下载图片。

const imageUrl = 'https://example.com/image.jpg';

const filename = 'downloaded_image.jpg';
fetchImageAsBlob(imageUrl)
    .then(blob => downloadBlob(blob, filename))
    .catch(console.error);

这种方法可以处理跨域问题，并且使用了现代的Fetch API，代码更加简洁和优雅。

四、总结与比较

1. 创建临时链接标签

这种方法简单易用，适用于绝大多数情况，但可能无法处理跨域图片下载的问题。

2. 使用Canvas将图片转化为Blob对象

这种方法适用于需要处理跨域图片或需要对图片进行处理的情况，但代码相对复杂。

3. 使用Fetch API下载图片数据

这种方法可以处理跨域问题，并且使用了现代的Fetch API，代码更加简洁和优雅。