前端实现批量下载图片（自己的服务器需设置可跨域请求）

最新推荐文章于 2024-06-21 17:55:28 发布

LHC087

最新推荐文章于 2024-06-21 17:55:28 发布

阅读量3.2k

点赞数 1

分类专栏：前端图片打包下载文章标签：前端图片打包下载

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

版权

前端实现批量压缩打包下载图片（自己的服务器需设置可跨域请求）1.第一种方式：（JavaScript实现）2.第二种方式：（vue脚手架实现）1.第一种方式：（JavaScript实现）<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <tit...

摘要由CSDN通过智能技术生成

前端实现批量压缩打包下载图片（自己的服务器需设置可跨域请求）

1.第一种方式：（JavaScript实现）

<!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" />
        <br /><br />
        <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");
                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"))

最低0.47元/天解锁文章

LHC087

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端实现批量下载图片（自己的服务器需设置可跨域请求）

前端实现批量压缩打包下载图片（自己的服务器需设置可跨域请求）1.第一种方式：（JavaScript实现）2.第二种方式：（vue脚手架实现）1.第一种方式：（JavaScript实现）<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <tit...
复制链接

扫一扫

专栏目录