前端实现批量压缩打包下载图片(自己的服务器需设置可跨域请求)
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"))