js在本地保存图片

// 假设你有一个图片的URL
const imageUrl = 'https://example.com/image.jpg';

// 使用fetch API获取图片数据
fetch(imageUrl)
  .then(response => response.blob())
  .then(blob => {
    // 创建一个指向该Blob的URL
    const url = URL.createObjectURL(blob);

    // 创建一个a标签
    const a = document.createElement('a');
    a.href = url;
    a.download = 'image.jpg'; // 设置下载的文件名

    // 将a标签添加到DOM中并触发点击事件
    document.body.appendChild(a);
    a.click();

    // 移除a标签并释放URL对象
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  })
  .catch(error => console.error('Error:', error));

// 假设你有一个图片的URL
const imageUrl = 'https://example.com/image.jpg';

// 创建一个Image对象
const img = new Image();
img.crossOrigin = 'Anonymous'; // 处理跨域问题
img.src = imageUrl;

img.onload = () => {
  // 创建一个Canvas元素
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;

  // 将图片绘制到Canvas上
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  // 将Canvas转换为Blob
  canvas.toBlob(blob => {
    // 创建一个指向该Blob的URL
    const url = URL.createObjectURL(blob);

    // 创建一个a标签
    const a = document.createElement('a');
    a.href = url;
    a.download = 'image.jpg'; // 设置下载的文件名

    // 将a标签添加到DOM中并触发点击事件
    document.body.appendChild(a);
    a.click();

    // 移除a标签并释放URL对象
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 'image/jpeg');
};