• 您好!欢迎来到ECSHOP插件网!
  • 注册
  • jQuery页面图片批量打包下载

    <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>
    <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", "ECSHOP教程网-www.ecshop51.com\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();
    }
    //传入图片路径,返回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>
    
    <img src="https://www.ecshop51.com/images/202005/goods_img/ecshop51.com-413_P_1589452188884.gif" />
     <img src="https://www.ecshop51.com/images/201911/goods_img/ecshop51.com-59_P_1573937069512.jpg" />
    <button onclick="packageImages()">批量图片打包</button><span id="status"></span>

    本文原创地址:https://www.ecshop51.com/article661.html
    版权所有 © 转载时必须以链接形式注明出处!

    觉得本文对您有用,想收藏下来!方法很简单:请点击-〉
    我们一直坚持白天工作、晚上熬夜更新资源,付出了巨大的精力和时间,其中的辛酸难以言述。

    实时购买动态 ×

    seocxh会员 在 2020-10-21 购买了 ECSHOP二次开发物流快递跟踪查询插件