前言
最近接触到了一种新的文件格式.cbz，可以在不打的情况下对里面的图片进行浏览，这对想分享漫画或者图片的我有很大的帮助。
方便管理，将图片放在一个压缩包里面，管理时可只对其压缩包进行管理。
方便插入，使用Markdown多图片不方便插入，虽然我已用上脚本，看下方代码JSON插入。
无需命名，为方便插入与防止脚本爬取需要随机命名后在进行分享，但
.cbz可转换为base64文件，避免命名。
扩展名为 .cbz 的文件是漫画书 ZIP 存档文件，它是图像的集合，代表漫画书的页面。 CBZ 不同于其他未压缩的电子书文件。大多数电子书和漫画书阅读器都支持查看这些文件。 CBR 是另一种漫画书存档文件格式，它使用 RAR 压缩而不是 ZIP。 CBZ 和 CBR 文件可以包含在漫画书收藏文件中，例如 CBC。可以打开和读取 CBZ 文件的应用程序包括 Calibre 和 Comic Book Reader 等软件应用程序。
资料来源：FILEFORMAT
代码
CBZ预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CBZ Viewer Component</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<style>
cbz-viewer img {
display: block;
margin: 10px auto;
max-width: 100%;
}
</style>
</head>
<body>
<!--使用组件-->
<cbz-viewer></cbz-viewer>
<script>
// 定义一个自定义元素'cbz-viewer'，用于显示.cbz格式的图片文件
customElements.define(
'cbz-viewer',
class CBZViewer extends HTMLElement {
// 构造函数，用于初始化元素
constructor() {
super();
// 创建一个开放模式的shadow DOM，以隔离样式和HTML
this.attachShadow({ mode: 'open' });
// 初始化渲染
this.render();
}
// 渲染方法，用于构建元素的内部结构和样式
render() {
// 设置shadow DOM的内部HTML结构，包括一个文件输入和一个图片容器
this.shadowRoot.innerHTML = `
<input type="file" id="cbzInput" accept=".cbz" />
<div id="imagesContainer"></div>
<style>
#imagesContainer img {
display: block;
margin: 10px auto;
max-width: 100%;
}
</style>
`;
// 监听文件选择事件
this.shadowRoot.getElementById('cbzInput').addEventListener('change', this.handleFileSelect.bind(this));
}
// 处理文件选择事件的方法
handleFileSelect(event) {
// 获取选择的文件
const file = event.target.files[0];
// 检查是否选择了有效的.cbz文件
if (file && file.name.endsWith('.cbz')) {
// 使用FileReader读取文件内容
const reader = new FileReader();
reader.onload = (event) => {
// 将文件内容作为ArrayBuffer读取
const arrayBuffer = event.target.result;
// 使用JSZip异步加载.cbz文件，准备显示图片
JSZip.loadAsync(arrayBuffer).then((zip) => {
this.displayImages(zip);
});
};
reader.readAsArrayBuffer(file);
} else {
// 如果没有选择有效的文件，提示用户
alert('请上传一个CBZ文件。');
}
}
// 显示图片的方法，根据ZIP文件的内容动态生成图片元素
displayImages(zip) {
// 获取图片容器
const imagesContainer = this.shadowRoot.getElementById('imagesContainer');
// 清空容器内容，准备显示新的图片
imagesContainer.innerHTML = '';
// 遍历ZIP文件中的所有条目，寻找图片文件并显示
zip.forEach((relativePath, zipEntry) => {
// 检查文件扩展名以确认是图片
if (zipEntry.name.match(/\.(jpg|jpeg|png|webp)$/i)) {
// 异步获取图片的base64编码
zipEntry.async('base64').then((base64) => {
// 创建图片元素并设置src
const img = document.createElement('img');
img.src = 'data:image/' + this.getExtension(zipEntry.name) + ';base64,' + base64;
// 将图片元素添加到容器中
imagesContainer.appendChild(img);
});
}
});
}
// 获取文件扩展名的方法
getExtension(filename) {
// 通过文件名获取扩展名
return filename.split('.').pop();
}
}
);
</script>
</body>
</html>
JSON插入
import json
# 加载JSON数据
json_data_path = r'../Demo/c.json'
with open(json_data_path, 'r', encoding='utf-8') as f:
json_data = json.load(f)
# 定义填充格式
formatted_data = ["".format(filename, filename) for filename, hash_value in json_data.items()]
# 打印结果
for data in formatted_data:
print(data)
结果预览
随机重命名后避免乱序请看这里：随机重命名后保证MD图片插入顺序正常
后记
有时间再进行完善。
2024.08.12
经过测试，由于需要两次加载，性能效果还不如直接插入图片来的快，贫穷限制了我的带宽，唉！
评论区