前端批量打包下载图片

最新推荐文章于 2024-04-29 17:01:02 发布

shua_1990

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量634

点赞数

分类专栏： jquery JavaScript 文章标签： javascript

原文链接：https://blog.csdn.net/weixin_43829905/article/details/89360553

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

jquery

0 篇文章 0 订阅

订阅专栏

1、批量下载图片（jquery）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            img{
                width: 200px;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <img src="http://img.zcool.cn/community/01c92f56597f686ac7251c94e76e51.jpg" />
        <img src="http://img.zcool.cn/community/01888f5922bad7b5b3086ed4cc3711.jpg" />
        <img src="http://ci.xiaohongshu.com/94cabc89-aaae-3608-bba3-c6a3d8098aa6?imageView2/2/w/1080/format/webp" />
        <img src="http://ci.xiaohongshu.com/db6ce95e-dcb0-58d2-9fa2-083b589d1c38?imageView2/2/w/1080/format/webp" />

        <button onclick="packageImages()">packageImages</button><span id="status"></span><br /><br />

        <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.bootcss.com/jszip/3.2.0/jszip.js"></script>
        <script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>

        <script type="text/javascript">
            function packageImages() {
                $('#status').text('处理中。。。。。');
                var imgs = $('img');
                var imgsSrc = [];
                var imgBase64 = [];
                var imageSuffix = [];//图片后缀
                var zip = new JSZip();
                zip.file("readme.txt", "案件详情资料\n"); //可以注释 下载多余的txt文件
                var img = zip.folder("images");

                for (var i = 0; i < imgs.length; i++) {
                    var src = imgs[i].getAttribute("src");
                    var suffix = src.substring(src.lastIndexOf("."));
                    imageSuffix.push(suffix);

                    getBase64(imgs[i].getAttribute("src"))
                       .then(function (base64) {
                           imgBase64.push(base64.substring(22));

                           //console.log(base64);//处理成功打印在控制台
                       }, function (err) {
                           console.log(err);//打印异常信息
                       });

                }
                function tt() {
                    setTimeout(function () {
                        if (imgs.length == imgBase64.length) {
                            for (var i = 0; i < imgs.length; i++) {
                                img.file(i + imageSuffix[i], imgBase64[i], { base64: true });
                            }
                            zip.generateAsync({ type: "blob" }).then(function (content) {
                                // see FileSaver.js
                                saveAs(content, "images.zip");
                            });
                            $('#status').text('处理完成。。。。。');

                        } else {
                            //console.log('imgs.length:'+imgs.length+',imgBase64.length:'+imgBase64.length);
                            $('#status').text('已完成：' + imgBase64.length + '/' + imgs.length);
                            tt();
                        }
                    }, 100);
                }
                tt();
            };
            //传入图片路径，返回base64
            function getBase64(img) {
                function getBase64Image(img, width, height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
                    var canvas = document.createElement("canvas");
                    canvas.width = width ? width : img.width;
                    canvas.height = height ? height : img.height;

                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    var dataURL = canvas.toDataURL();
                    return dataURL;
                }
                var image = new Image();
                //设置这个可实行跨域请求图片资源，但是在别人的服务器没设置可跨域时是无法下载的，自己的服务器设置后才可以
                image.crossOrigin = 'Anonymous';
                image.src = img;
                var deferred = $.Deferred();
                if (img) {
                    image.onload = function () {
                        deferred.resolve(getBase64Image(image));//将base64传给done上传处理
                    }
                    return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
                }
            };
</script>
    </body>
</html>

注：网络图片最好是跟网站地址一样；不然会出现下载报错跨域的问题（谷歌浏览器会出现），火狐和IE貌似不会出现跨域问题

2、单个图片下载

<div id="img">
    <img src="xxxx" alt="图一" />
</div>   
<button onclick="downloadImages()">下载图片</button>

<script>
 function downloadImages(){
        var img=document.querySelector('#img>img')
        var src = img.src;
        var name = img.alt;
        //src:图片的地址 name：图片名字
        var canvas = document.createElement('canvas');
        var img = document.createElement('img');
        img.onload = function(e) {
            canvas.width = img.width;
            canvas.height = img.height;
            var context = canvas.getContext('2d');
            context.drawImage(img, 0, 0, img.width, img.height);
            canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
            canvas.toBlob((blob)=>{
                let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = name; 
                link.click();  
            }, "image/jpeg");
        }
        img.setAttribute("crossOrigin",'Anonymous');
        img.src = src;
    }
</script>

shua_1990

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端批量打包下载图片

1、批量下载图片（jquery）<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> img{ width: 200px; height: 150px; .
复制链接

扫一扫