前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS批量打包下载图片(笔记)

JS批量打包下载图片(笔记)

作者头像
小语雀网
发布2022-05-06 14:02:38
2.5K0
发布2022-05-06 14:02:38
举报
文章被收录于专栏:小语雀网
代码语言:javascript
复制
 <img src="http://img.zcool.cn/community/01c92f56597f686ac7251c94e76e51.jpg" />
 <img src="http://img.zcool.cn/community/01888f5922bad7b5b3086ed4cc3711.jpg" />
 <button onclick="packageImages()">packageImages</button><span id="status"></span>
代码语言:javascript
复制
<script src="http://stuk.github.io/jszip/test/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://stuk.github.io/jszip/dist/jszip.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>
代码语言:javascript
复制
function packageImages() {
    $('#status').text('处理中。。。。。');

    var imgs = $('img');

    var imgsSrc = [];
    var imgBase64 = [];
    var imageSuffix = [];//图片后缀
    var zip = new JSZip();
    zip.file("readme.txt", "案件详情资料\n");
    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();
}
代码语言:javascript
复制
//传入图片路径,返回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']
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-01-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档