如何显示zip文件内的图片

一、前期准备

项目所需文件为:JqueryJSZIPJSZIP_utils

二、代码编写

首先新建一个HTML并且引入上面三个项目(其中JSZIP需要引入JSZIP/dist/jszip.min.js)

<script src="https://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script src="jszip.min.js"></script>
<script src="jszip-utils.js"></script>

其次需要在Body创建一个需要放置图片的DIV

<div id="jszip_utils"><span id="click">点击加载</span></div>

然后加入Javascript脚本

$('#click').on("click",function(){
    //Base64转BloB连接
    var convertBase64ToBlob = function(base64) {
        var base64Arr = base64.split(',');
        var imgtype = '';
        var base64String = '';
        if (base64Arr.length > 1) {
            base64String = base64Arr[1];
            imgtype = base64Arr[0].substring(base64Arr[0].indexOf(':') + 1, base64Arr[0].indexOf(';'));
        }
        var bytes = atob(base64String);
        var bytesCode = new ArrayBuffer(bytes.length);
        var byteArray = new Uint8Array(bytesCode);
        for (var i = 0; i < bytes.length; i++) {
            byteArray[i] = bytes.charCodeAt(i);
        }
        return new Blob([bytesCode], {
            type: imgtype
        });
    };
    
    //加载zip文件
    var promise = new JSZip.external.Promise(function(resolve, reject) {
        JSZipUtils.getBinaryContent('https://test.postloli.com/zip/assets/images.zip', function(err, data) {
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        });
    });
    
    //读取zip文件
    promise.then(JSZip.loadAsync).then(function(zip) {
        console.log('Loading Zip...');
        for (var key in zip.files) {
            //内置函数,判断是否是文件夹
            if (!zip.files[key].dir) {
                var base = zip.file(zip.files[key].name).async("base64");
                base.then(function(res) {
                    $("#jszip_utils").append("<image alt='" + i + "' src='" + URL.createObjectURL(convertBase64ToBlob('data:image/png;base64,' + res)) + "'></image>");
                })
            }
        }
    }).then(function success(data) {
        //读取完毕
        console.log('Complete');
    }, function error(e) {
        //读取失败
        console.log('Error');
    });
    
    //计时器
    var i = 0;
    setInterval(function() {
        i++;
    }, 1000);
})

运行原理:加载ZIP后通过JSZIP读取其内容并转换为Blob连接后插入到页面中.

示例请看:

加载ZIP内图片

本文中的图片均是通过ZIP转换成BLOB URL显示

人已赞赏
5 条回复 A文章作者 M管理员
  1. 哎妈 技术贴

    • 渣技术

  2. 这个棒!可以用得着|´・ω・)ノ

  3. 暖o.o

个人中心
今日签到
有新消息 消息中心
有新私信 私信列表
搜索