跨域图片下载JFIF格式解决方案及前端zip包下载

川长思鸟来 2023-10-10 21:46 6阅读 0赞

![2e9337b342505f9051902c66f2a2add6.jpeg][]

### 前言 ###

之前文章有写过图片下载，同域名图片，只要添加download就可以下载下来，但是download在跨域图片中不起作用，因此，可以用canvas方式或者xhr方式下载。但是呢，通过canvas或者xhr下载下来的图片，在win10上面，可能会变成怪异的JFIF，这个如何解决呢？

### 解决方案 ###

推荐使用file-saver 这个库

> npm install file-saver --save

import { saveAs } from 'file-saver'
    
     saveAs("https://www.haorooms.com/upload/image.jpg", "haorooms.jpg");

这样就可以了，超级简单。

### 通过zip包下载多个img图片 ###

首先，我们需要jszip 这个库

下载多个在线img图片地址并打包成zip的方法如下：

let zip = new JSZip()
      var myFile = zip.folder()
      let promiseAllData =[]
      res.data.forEach(imglist=>{// res.data是图片对象数组[{id,width,height,preview_url:'https://www.haorooms.com/1.jpg'}]这样的格式
        (function(n) {
            promiseAllData.push(loadAsArrayBuffer(n.preview_url).then(buffer=>{
              myFile.file(`${n.id}-${n.width}*${n.height}.${checkAllimageType=='JPG'?'jpg':'png'}`,buffer)//checkAllimageType是JPG/PNG
            })) 
    
      })(imglist)
      })
      Promise.all(promiseAllData).then(result=>{
         zip.generateAsync({type:'blob'}).then((content)=> {
           saveAs(content, `批量制图-${new Date().getTime()}.zip`)
         })
      })

//loadAsArrayBuffer 这个方法是图片下载的promise封装方法

export function loadAsArrayBuffer(url) {
      return new Promise((resolve,reject)=>{
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "arraybuffer";
        xhr.onerror = function() {/* handle errors*/};
        xhr.onload = function() {
          if (xhr.status === 200) {
            resolve(xhr.response)}
          else {
            reject({})
          }
        }
        xhr.send();
      })
    }

[2e9337b342505f9051902c66f2a2add6.jpeg]: https://img-blog.csdnimg.cn/img_convert/2e9337b342505f9051902c66f2a2add6.jpeg