下载图片js怎么写

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);
}
// 使用示例
downloadImage('https://example.com/image.jpg', 'myImage.jpg');

这种方法的优点是简单直接，不需要额外的API调用，适用于大多数情况下的图片下载。

二、使用Canvas和File API

对于一些需要对图片进行处理的场景，比如添加水印或调整尺寸，可以使用Canvas和File API来实现。这种方法虽然复杂一些，但提供了更多的灵活性。

function downloadImageFromCanvas(url, filename) {

    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((blob) => {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }, 'image/jpeg');
    };
}
// 使用示例
downloadImageFromCanvas('https://example.com/image.jpg', 'myCanvasImage.jpg');

这种方法适用于需要对图片进行处理的场景，比如添加水印、剪裁、调整大小等。

三、通过XMLHttpRequest或Fetch API获取图片数据

对于一些需要处理二进制数据的场景，可以使用XMLHttpRequest或Fetch API来获取图片数据，并使用Blob对象创建下载链接。

function downloadImageUsingFetch(url, filename) {

    fetch(url)
        .then(response => response.blob())
        .then(blob => {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        })
        .catch(error => console.error('Download failed', error));
}
// 使用示例
downloadImageUsingFetch('https://example.com/image.jpg', 'myFetchImage.jpg');

这种方法适用于需要处理图片的二进制数据的场景，比如将图片数据存储在数据库中或进行复杂的数据处理。

希望这篇文章能帮助你更好地理解和实现JavaScript下载图片的功能。

相关问答FAQs：

1. 如何使用JavaScript下载图片？

• 问题：我想通过JavaScript来下载图片，该怎么写代码？
• 回答：您可以使用以下代码来实现通过JavaScript下载图片：

function downloadImage(url) {
  var link = document.createElement('a');
  link.href = url;
  link.download = 'image.jpg';
  link.click();
}

此代码将创建一个链接元素，将图片的URL赋值给链接的href属性，并设置download属性为想要保存的文件名。然后，通过调用link.click()方法来触发下载。

2. 如何在网页中使用JavaScript下载多张图片？

• 问题：我想在网页中使用JavaScript下载多张图片，应该如何操作？
• 回答：您可以使用以下代码来实现通过JavaScript下载多张图片：

function downloadImages(urls) {
  for (var i = 0; i < urls.length; i++) {
    var link = document.createElement('a');
    link.href = urls[i];
    link.download = 'image' + i + '.jpg';
    link.click();
  }
}

此代码将循环遍历图片URL数组，并为每张图片创建一个链接元素。通过设置链接元素的href属性和download属性，将图片的URL和文件名指定为'image' + i + '.jpg'，其中i是图片在数组中的索引。最后，通过调用link.click()方法来触发下载。

3. 如何在JavaScript中实现下载图片后的回调操作？

• 问题：我想在图片下载完成后执行一些回调操作，应该如何在JavaScript中实现？
• 回答：您可以使用以下代码来在图片下载完成后执行回调操作：

function downloadImage(url, callback) {
  var link = document.createElement('a');
  link.href = url;
  link.download = 'image.jpg';
  link.addEventListener('click', function() {
    callback();
  });
  link.click();
}

此代码将在创建链接元素后，通过addEventListener()方法为链接元素添加一个'click'事件监听器。当用户点击下载链接时，将执行传入的回调函数callback()。您可以在回调函数中编写您想要执行的操作，比如显示一个提示消息或者执行其他相关的JavaScript代码。