js实现多张图片打包成zip
作者:路途~~ 发布时间:2024-04-22 22:15:09
标签:js,图片,打包,zip
1、引入文件
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
2、html页面
<button onclick="packageImages()">下载zip</button><span id="status"></span>
3、主要代码
function packageImages() {
$('#status').text('处理中。。。。。')
var imgsSrc = []
// https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg
// https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg
for (var i = 0; i < 1; i++) {
imgsSrc.push('https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg_240x240.jpg')
}
var imgBase64 = [] //base64图片
var imageSuffix = [] //图片后缀
var zip = new JSZip()
zip.file('readme.txt', '案件详情资料\n')
var img = zip.folder('images')
for (var i = 0; i < imgsSrc.length; i++) {
var suffix = imgsSrc[i].substring(imgsSrc[i].lastIndexOf('.'))
imageSuffix.push(suffix)
getBase64(imgsSrc[i]).then(
function (base64) {
console.log(base64)
imgBase64.push(base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, ""))
// 当所有图片转成base64执行图片压缩
if (imgsSrc.length == imgBase64.length) {
for (var i = 0; i < imgsSrc.length; i++) {
// 文件名 数据
img.file(i + imageSuffix[i], imgBase64[i], {
base64: true,
})
}
zip.generateAsync({
type: 'blob'
}).then(function (content) {
console.log(1)
// see FileSaver.js
saveAs(content, 'images.zip')
$('#status').text('处理完成。。。。。')
})
}
},
function (err) {
console.log(err) //打印异常信息
}
)
}
}
//传入图片路径,返回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']
}
}
4、优化图片转base64的流程,提高zip的打包速度
function packageImages() {
$('#status').text('处理中。。。。。')
var imgsSrc = []
// https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg
// https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg
for (var i = 0; i < 1; i++) {
imgsSrc.push('https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg')
}
var imgBase64 = [] //base64图片
var imageSuffix = [] //图片后缀
var zip = new JSZip()
zip.file('readme.txt', '案件详情资料\n')
var img = zip.folder('images')
for (var i = 0; i < imgsSrc.length; i++) {
var suffix = imgsSrc[i].substring(imgsSrc[i].lastIndexOf('.'))
imageSuffix.push(suffix)
getBase64(imgsSrc[i], function (base64) {
imgBase64.push(base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, ""))
if (imgsSrc.length == imgBase64.length) {
for (var i = 0; i < imgsSrc.length; i++) {
// 文件名 数据
img.file(i + imageSuffix[i], imgBase64[i], {
base64: true,
})
}
zip.generateAsync({
type: 'blob'
}).then(function (content) {
console.log(1)
// see FileSaver.js
saveAs(content, 'images.zip')
$('#status').text('处理完成。。。。。')
})
}
})
}
}
function getBase64(img, callback) {
fetch(img).then(
res => res.blob())
.then(res => {
let fr = new FileReader();//https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
fr.onload = function (e) {
callback(e.target.result)
};
fr.onerror = function () {
console.log('读取错误!')
};
fr.readAsDataURL(res);//如果是转文字,第二个参数可以使用编码
})
}
5、再优化,通过axios把图片转成base64
function packageImages() {
$('#status').text('处理中。。。。。')
var imgsSrc = []
// https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg
// https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg
for (var i = 0; i < 100; i++) {
imgsSrc.push('https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg')
}
handleBatchDownload(imgsSrc)
}
getFile = (url) => {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toString())
})
})
};
// 批量下载
handleBatchDownload = async (selectImgList) => {
const data = selectImgList;
const zip = new JSZip()
const promises = []
await data.forEach((item, idx) => {
// console.log(item, idx)
const promise = this.getFile(item).then(async (data) => { // 下载文件, 并存成ArrayBuffer对象
const arr_name = item.split("/");
let file_name = arr_name[arr_name.length - 1] // 获取文件名
// if (file_name.indexOf('.png') == -1) {
// file_name = file_name + '.png'
// }
await zip.file(idx + '.png', data, {
binary: true
}) // 逐个添加文件
})
promises.push(promise)
})
Promise.all(promises).then(() => {
zip.generateAsync({
type: "blob"
}).then(content => { // 生成二进制流
saveAs(content, "photo.zip") // 利用file-saver保存文件
$('#status').text('处理完成。。。。。')
})
})
};
来源:https://juejin.cn/post/6966874238087069710
0
投稿
猜你喜欢
- # -*- coding: utf-8 -*-"""Created on Sat Jun 20 19:36:3
- 何谓socket计算机,顾名思义即是用来做计算。因而也需要输入和输出,输入需要计算的条件,输出计算结果。这些输入输出可以抽象为I/O(inp
- 前言本文主要给大家介绍了关于Python利用元组代替字典并为元组元素命名的相关内容,下面话不多说了,来一起看看详细的介绍吧场景:一般使用字典
- 如下所示:#tensorflow 中从ckpt文件中恢复指定的层或将指定的层不进行恢复:#tensorflow 中不同的layer指定不同的
- 代码简单,直接看代码吧:import socketimport threadingimport re#import Tkinterdef s
- 方法一:读取文件时设置代码如下:Data = pd.read_excel(level_path, sheet_name=0, encodin
- 前言看到一个很有意思的项目,其实在之前就在百度飞浆等平台上看到类似的实现效果。可以将照片按照视频的表情,动起来。看一下项目给出的效果。项目地
- 1. 新建文件夹if not os.path.exists(feature_dir): os.makedirs(f
- 在处理数据的时候,很多时候会遇到批量替换的情况,如果一个一个去修改效率过低,也容易出错。replace()是很好的方法。源数据1、替换全部或
- 如下所示:from sklearn.datasets import load_bostonboston = load_boston()fro
- 前言在数据分析领域,最热门的莫过于Python和R语言,本文将详细给大家介绍关于Python利用pandas查询数据的相关内容,分享出来供大
- 记得自己学习的心得,为了自己以后调试方便些。1.操作步骤:1.1 添加断点直接在标记处点击鼠标左键即可。(删除断点只需再点击断点处即可)1.
- Laravel 的上一个 LTS(长期支持)版本是 Laravel 5.1,发布于 2015 年 6 月,按照对 LTS 版本的约定,两年的
- int connectDb() { EXEC SQL BEGIN DECLARE SECTION; char username[20]; c
- 本文实例讲述了python解析xml文件的方法。分享给大家供大家参考。具体如下:python解析xml非常方便。在dive into pyt
- varchar(n)长度为 n 个字节的可变长度且非 Unicode 的字符数据。n 必须是一个介于 1 和 8,000 之间的数值。存储大
- 我们将要来学习python的重要概念迭代和迭代器,通过简单实用的例子如列表迭代器和xrange。可迭代一个对象,物理或者虚拟存储的序列。li
- 一 修改root密码的三种办法方法1: 用SET PASSWORD命令首先登录MySQL。格式:mysql> set password
- 上篇文章给大家介绍过 Python脚本破解Linux口令(crypt模块) 感兴趣的朋友点击查
- 一.环境搭建1.下载安装包访问 Python官网下载地址:https://www.python.org/downloads/下载适合自己系统