前端图片下载

记录常见 前端 的图片（文件流）下载功能

---

---

前言

总结常见的web 图片下载功能

---

一、代码示例如下

代码如下（示例）：

/**
 * 封装的图片下载函数
 * @param {**传递的url参数} imgurl 
 * @param {**需要设置image的名字} name 
 */
function dwonloadImg(imgurl,name) {
    // 初始化image标签
    const image = new Image();
    // 解决url 下载的跨域问题
    image.setAttribute('crossOrigin','anonymous');
    // URL 拼接时间戳 来解决本地缓存的问题
    image.src = imgurl + '?tamp='+(new Date()).valueOf();
    // 回调去下载方法
    image.onload = () => {
        // 利用画布：来实现某些图片只能预览而不能下载的问题；
        let cavans = document.createElement('canvas');
        cavans.width = image.width;
        cavans.height = image.height;
        let ctx = cavans.getContext('2d');
        ctx.drawImage(image,0,0,image.width,image.height);
        cavans.toBlob((blob) => {
            let url = URL.createObjectURL(blob);
            let eleLink = document.createElement('a');
            eleLink.download = name;
            eleLink.href = url;
            eleLink.click();
            eleLink.remove();
            URL.revokeObjectURL(url);
        })
    }
}

---

总结

在react 或者vue 的项目中可能会遇到图片的下载功能，
一般情况的下会有现成的库或者封装好的函数，
但是在有些情况下图片只是预览而不是下载，
所以进行了一个简单的封装函数，来实现下载图片的功能。