首页 > 其他分享 >JS批量下载图片

JS批量下载图片

时间:2023-02-23 09:11:41浏览次数:44  
标签:function canvas 批量 img JS var 图片 下载 pathImg

  已用该文章的知识实现了批量下载,所需的两个JS文件可以在GitHub下载

<script src="/js/jszip.js"></script>
<script src="/js/FileSaver.min.js"></script>
<script>
    $("#btn_downloadImage").click(function () {
        layer.msg("正在打包下载……", { icon: 1 });
        //防止连续点击
        $("#btn_downloadImage").attr('disabled', "true");
        var houseId = $("#hidId").val();
        $.ajax({
            url: '/House/HouseInfo/GetAllImage',
            type: "post",
            data: { Id: houseId },
            success: function (msg) {
                var result = $.parseJSON(msg);
                var s1 = result[0].imgPath;
                var pathImg = new Array();
                for (var i = 0; i < result.length; i++) {
                    pathImg[i] = _imgTool["ImgShowUri"] + result[i].imgPath + "-big";//获取图片路径
                }
                var patimghImg = new Array();
                var isNum = 0;//阻碍进程的标识
 
                //根据图片路径将图片转为base64
                function convertImgToBase64(url, callback, outputFormat) {
                    isNum = 1;
                    var canvas = document.createElement('CANVAS'),
                        ctx = canvas.getContext('2d'),
                        img = new Image;
                    img.crossOrigin = 'Anonymous';
                    img.onload = function () {
                        canvas.height = img.height;
                        canvas.width = img.width;
                        ctx.drawImage(img, 0, 0);
                        var dataURL = canvas.toDataURL(outputFormat || 'image/jpg');
                        callback.call(this, dataURL);
                        canvas = null;
                        isNum = 0;
                    };
                    img.src = url;
                }
 
                //将每张base64图片保存到img在进行压缩
                for (var i = 0; i < pathImg.length; i++) {
                    test(pathImg[i]);//测试:imagePath
                    setTimeout(3000, isD);
                }
 
                function isD() {//阻塞等待进程执行结束
                    if (isNum == 0) {
 
                    } else {
                        setTimeout(3000, isD)
                    }
                }
 
                var j = 0;
                var zip = new JSZip();
                var img = zip.folder("images");
                //压缩下载图片
                function test(imagePath) {
                    convertImgToBase64(imagePath, function (base64Img) {
                        //console.log(base64Img);
                        patimghImg[j] = base64Img;
                        var imgstr = patimghImg[j].split(',')[1];
                        img.file(j + ".jpg", imgstr, { base64: true }); //获取图片文件
                        j++;
                        if (j == pathImg.length) {
                            zip.generateAsync({ type: "blob" }).then(function (content) {
                                // 保存到安装包
                                saveAs(content, houseId + "Example.zip");
                                $('#btn_downloadImage').removeAttr("disabled");
                            });
                        }
                    });
                }
            }
        });
 
    });
</script>

一些CSS元素根据需求可以改动一下,JS代码没有问题

 

原文链接:https://www.cnblogs.com/fyssl/p/9523132.html

标签:function,canvas,批量,img,JS,var,图片,下载,pathImg
From: https://www.cnblogs.com/corechen/p/17146686.html

相关文章

  • js 内存泄露是什么?常见的有哪些?
    内存泄露定义:一块被分配的内存既不能使用也无法回收,直到浏览器进程结束;常见的有以下这些:1,意外的全局变量;2,console.log;3,DOM泄露;4,闭包;5,被遗忘的定......
  • spring boot内置tomcat运行JSP报错
    =============================================== 2023/2/23_第1次修改                       粽先生 ==================================......
  • js用正则截取标签内的数据,xml数据读取
    <aa>1<bb>2<cc>3</cc></bb><dd>4</dd></aa>如何使用正则表达式获取每个标签内容?......
  • ar小Demo(aframe.js)
    官网:https://aframe.io/中文网:https://www.techbrood.com/aframe/guides?p=building-a-basic-scene虚拟现实https://mp.weixin.qq.com/s/6ddpdknOHAKO9ORUPIqnAg......
  • 【JS】JavaScript进阶 ES6 - 黑马视频笔记
    1.作用域作用域(scope)规定了变量能够被访问的“范围”,离开这个范围变量便不能被访问。分为:局部作用域、全局作用域。1.1局部作用域局部作用域分为:函数作用域、块作用......
  • 【Java对象转换】001- Java 对象与 JSON 互转
    文章目录​​【Java对象转换】001-Java对象与JSON互转​​​​一、Java对象与JSON概述​​​​1、Java对象​​​​2、JSON​​​​二、JSON解析及与Java对象互转......
  • Node.js 环境搭建教程
    Node.js环境搭建教程文章目录​​Node.js环境搭建教程​​​​一、下载与安装​​​​1、下载​​​​2、安装​​​​第一步:点击“next”​​​​第二步:勾选“Iaccept.......
  • 【JavaScript】JS引擎中执行上下文如何顺序执行代码
    首先我们知道JavaScript引擎包括一个调用栈和堆,调用栈是代码实际执行的地方,使用执行上下文(执行环境)来完成;堆是非结构化的内存池,存储了应用程序所需要的所有对象。执行上......
  • 2.4 下载groovy-sdk
    下载地址:​​https://groovy.apache.org/download.html​​点击下载:版本搭配:2.5groovy-sdk目录结构将apache-groovy-sdk-3.0.9.zip解压到合适的位置即可,主要目录结构就是bi......
  • python Django基于物品协同过滤图书推荐论坛系统(课设、毕设、学习、源码下载)
    pythonDjango基于物品协同过滤图书推荐论坛系统PythonDjango基于物品推荐协同过滤图书推荐论坛系统pythonDjango图书论坛PythonDjango图书推荐系统 后端:python3......