【备忘】js图片下载，支持批量、单个下载

场景：

看到猛虎下山图集太搞笑了。。。。

需求：

然后就动了歪心思，得搞下来！

制作：

网上有类似的代码，但是用起来很不舒服，于是就自己搞了一下。

function downloadIamge(imgsrc, name) {
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function() {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "photo"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
}
//执行下载
function doDown(imgElementObj){
    let length = $(imgElementObj).length;
 
    let i = 0;
    let intval_index = setInterval(function(){
        if(i>=length){
            return clearInterval(intval_index);
        }
 
        downloadIamge(imgElementObj.eq(i).attr('src'),new Date().getTime()+''+i);
 
        i++;
    },500);
}
 
doDown($('body').find('img'));

注意：

doDown参数是单个图片就下载单个，多个就下载多个，但是必须要精确到img标签元素。

封装：

此代码可以直接用，为了优雅，它也被我封装成了js工具类，欢迎下载使用。

下载地址：

扫描二维码关注公众号，回复： 13247486 查看本文章

git下载：https://gitee.com/drop_drop/javascript_utility_tools.git

http下载：https://gitee.com/drop_drop/javascript_utility_tools/repository/archive/master.zip

测试：

测试了几十次，功夫不负有心人，越来越完善，个人感觉挺好用的，因为已经是按照我的想法去做的。

测试时一共批量下载了90张图。

END

【备忘】js图片下载，支持批量、单个下载

猜你喜欢