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

前言

之前文章有写过图片下载，同域名图片，只要添加 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();})
}

小结

上面就是跨域图片下载 JFIF 格式解决方案及前端 zip 包下载，相关代码。