js前端下载图片

前端通过js下载图片

主要步骤

1. 把图片转化为base64格式
2. 把base64转化为blob格式
3. 插入a标签进行下载

/**
 * 进行base64转化
 */
getBase64 (img, width = '', height = ''){
    return new Promise((resolve, reject) => {
        let image = new Image()
        image.crossOrigin = ''
        image.src = img
        image.onload = () => {
            let canvas = document.createElement('canvas')
            canvas.width = width ? width : image.width
            canvas.height = height ? height : image.height
            let ctx = canvas.getContext('2d')
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
            let dataUrl = canvas.toDataURL()
            resolve(dataUrl)
        }
    })
},
/**
 * 创建a标签进行下载
 */
downloadFile (fileName, content) {
    let aLink = document.createElement('a');
    let blob = this.base64ToBlob(content); //new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.click();
},
/**
 * base64转blob
 */
base64ToBlob(code) {
    let parts = code.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
},
/**
 * 下载按钮点击
 */
downIcon (item) {
	//获取filename
    let fileName = item.src.split('/').pop().split('.')[0]
    this.getBase64(item.src, 0, 0).then(res => {
    	//res即是转化的base64格式
        this.downloadFile(fileName, res)
    })
}