前端下载非同源图片

在前端最常见实现图片下载的方法是使用 a 标签的 download 属性

<a href=“example.jpg" download="example.jpg">下载图片</a>

但是这种实现点击下载的前提是要下载的图片是同源的，非IE浏览器中会直接跳转到该图片的预览地址。

在 React 项目中解决跨域问题并实现图片下载功能，可以通过创建一个隐藏的 <a> 标签，使用 XMLHttpRequest 或 fetch 方法获取图片，然后将图片数据转为 Blob 对象，创建 URL 对象，将 URL 对象赋值给 <a> 标签的 href 属性并设置 download 属性为所需的文件名，最后模拟点击 <a> 标签来触发下载。

下面是一个示例代码，用于在 React 中实现图片下载功能：

import React from 'react';

class ImageDownload extends React.Component {
  constructor(props) {
    super(props);
    this.downloadImage = this.downloadImage.bind(this);
  }

  downloadImage() {
    const imageUrl = 'https://example.com/image.jpg'; // 图片 URL
    const fileName = 'image.jpg'; // 下载的文件名

    fetch(imageUrl)
      .then((response) => response.blob())
      .then((blob) => {
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = fileName;
        link.click();
        URL.revokeObjectURL(url);
      });
  }

  render() {
    return (
      <div>
        <button onClick={this.downloadImage}>下载图片</button>
      </div>
    );
  }
}

export default ImageDownload;

在上述示例中，当用户点击"下载图片"按钮时，会触发 downloadImage 方法。该方法使用 fetch 方法获取图片数据，并将其转换为 Blob 对象。然后，创建一个临时的 URL 对象，将 URL 对象赋值给 <a> 标签的 href 属性，并设置 download 属性为所需的文件名。最后，通过模拟点击 <a> 标签来触发下载。