JS浏览器中下载图片案例

JS 浏览器中下载图片案例

[TOC]
### 1. 下载base64图片
#### 1.1 下载base64的svg图片
下载源：以`data:image/svg+xml;base64,`开头base64图片

此方法需要借助canvas的getDataURL方法来实现，因此需要将图片放入到一个canvas中，具体的实现看代码

**示例：**代码如下

#### 1.2 下载base64的png图片
下载源：以`data:image/png;base64,`开头base64图片

此方法需要借助`Blob`对象，将图片的base64转成`Blob`对象，然后将`Blob`对象转成`URL`对象，使用`a`标签触发下载

**示例：**代码如下

### 2. 下载远程图片
此方法下载的是远程地址图片，因此地址必须指向一个有效的图片地址

这种方法用到了创建事件 `createEvent`，初始化事件 `initMouseEvent`，触发事件 `dispatchEvent`，但这种方法已不适合现在的规范，因为initMouseEvent已经被现在的规范启用，如果有`老版IE浏览器`方面的需求可以使用

**示例：**下面代码以下载百度地址图片为例，代码如下

```html
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <script src="../../Js/case/下载图片.js" type="text/javascript"></script>
</hred>
<div id="app">
    <img src="https://storage-public.zhaopin.cn/user/avatar/1583843473427893323/3b455a32-17d4-4e39-b5b6-fa04a88c36ed.jpg" style="width: 200px;" onclick="download('https://storage-public.zhaopin.cn/user/avatar/1583843473427893323/3b455a32-17d4-4e39-b5b6-fa04a88c36ed.jpg')">
</div>
<script type="text/javascript">
    //src是img标签的src值
    function download(src) {
        var $a = document.createElement('a');
        // 下面response-content-type=application/octet-stream声明内容很关键，如果没有加只会在浏览器中打开
        $a.setAttribute("href", src + "?response-content-type=application/octet-stream");
        // 这里要给a标签添加download属性
        $a.setAttribute("download", "");
        // 创建鼠标事件
        var evObj = document.createEvent('MouseEvents');
        // 初始化鼠标点击事件
        evObj.initMouseEvent('click', true, true);
        // 让a标签触发事件
        $a.dispatchEvent(evObj);
    };
</script>
</html>
```

### 3. 下载svg路径的图片
下载svg路径标签的图片需要将svg转换成 `base64`，然后按照下载 `data:image/svg+xml;base64,` 的方式下载即可

此方法需要借助canvas的getDataURL方法来实现，因此需要将图片放入到一个canvas中，具体的实现看代码

```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <script src="../../Js/case/下载图片.js" type="text/javascript"></script>
</hred>
<div id="app">
    <svg width="128" height="128" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" onclick="downloadSvg(this)">
        <path
            d="M11.54 2H9.09l4.46 12H16L11.54 2ZM4.46 2 0 14h2.5l.9-2.52h4.68L8.99 14h2.5L7.02 2H4.46Zm-.24 7.25 1.52-4.22 1.53 4.22H4.22Z">
        </path>
    </svg>
</div>
<script type="text/javascript">
// 下载svg标签图片
async function downloadSvg(obj) {
  // 将svg转成base64
  const srccanvas = await new Promise((resolve, reject) => {
    try {
      // 将svg标签序列化成string字串后使用btoa转成base64
      var src = "data:image/svg+xml;base64," + btoa(new XMLSerializer().serializeToString(obj));
      return resolve(src)
    } catch {
      reject(error)
    }
  })

// 创建图片对象
  const loadImage = new Image();
  loadImage.src = srccanvas  // 将页面上的图片赋值给创建的图片对象，页面上图片格式svg+xml的base64

// 等待图片加载完成
  await new Promise((resolve, reject) => {
    loadImage.onload = () => resolve();
    loadImage.onerror = (error) => reject(error);
  });

const canvas = document.createElement("canvas"); // 要将svg下载成图片需要借助canvas的getDataURL方法
  canvas.width = obj.clientWidth;
  canvas.height = obj.clientHeight;
  const canvasImage = canvas.getContext("2d");
  // canvasImage.fillStyle = "#ce9c7a";
  // canvasImage.fillRect(0,0,obj.clientWidth,obj.clientHeight)
  canvasImage.drawImage(loadImage, 0, 0, obj.clientWidth, obj.clientHeight);

const a = document.createElement("a");  // 创建一个a标签来触发下载事件
  a.download = "ai.png";
  a.href = canvas.toDataURL("image/png", 1)
  a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));//兼容火狐
}
</script>
</html>
```

> **Tips:**

> `svg` 在转换成 `base64` 时需要一定的时间，所以这里采用了异步的方式来下载，还有一个点需要注意的是，需要等待图片已经加载到 `Image` 对象后再去绘制 `canvas`，否则可能会出现绘制空图片的情况，因此图片加载这里也使用了一个异步 `Promise`