七夏 发表于 2025-3-16 08:44
二次元聚合短视频解析去水印系统源码1.更换了失效的天气查询接口并增加用户欢迎
2.更改视频下载方式，使用F ...
1. 更换失效的天气查询接口并增加用户欢迎信息。
2. 使用FileSaver.js进行视频下载。
3. 增加图集解析一键打包下载功能（使用JSZip.js）。
4. 更换更快的前端资源CDN，并适配手机端。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二次元聚合短视频解析去水印系统</title>
<!-- 引入更快的前端资源CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jszip/dist/jszip.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">二次元聚合短视频解析去水印系统</h1>
<div id="welcomeMessage" class="alert alert-success mt-3" style="display: none;"></div>
<div class="row">
<div class="col-md-6">
<h2>视频下载</h2>
<input type="text" id="videoUrl" class="form-control mb-3" placeholder="输入视频URL">
<button id="downloadVideo" class="btn btn-primary">下载视频</button>
</div>
<div class="col-md-6">
<h2>图集解析下载</h2>
<input type="text" id="galleryUrl" class="form-control mb-3" placeholder="输入图集URL">
<button id="downloadGallery" class="btn btn-primary">一键打包下载</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 显示欢迎信息
const welcomeMessage = document.getElementById('welcomeMessage');
welcomeMessage.style.display = 'block';
welcomeMessage.innerText = '欢迎使用二次元聚合短视频解析去水印系统！';
// 更换失效的天气查询接口并增加用户欢迎信息
axios.get('https://api.example.com/weather?city=Beijing')
.then(response => {
console.log('当前天气:', response.data);
})
.catch(error => {
console.error('获取天气信息失败:', error);
});
// 视频下载功能
document.getElementById('downloadVideo').addEventListener('click', () => {
const videoUrl = document.getElementById('videoUrl').value;
if (videoUrl) {
axios({
url: videoUrl,
method: 'GET',
responseType: 'blob' // 重要
}).then(response => {
const blob = new Blob([response.data], { type: response.data.type });
saveAs(blob, 'video.mp4');
}).catch(error => {
console.error('下载视频失败:', error);
});
} else {
alert('请输入视频URL');
}
});
// 图集解析下载功能
document.getElementById('downloadGallery').addEventListener('click', () => {
const galleryUrl = document.getElementById('galleryUrl').value;
if (galleryUrl) {
axios.get(galleryUrl)
.then(response => {
const images = response.data.images; // 假设返回的数据格式为 { images: [url1, url2, ...] }
const zip = new JSZip();
let count = 0;
images.forEach((imageUrl, index) => {
axios({
url: imageUrl,
method: 'GET',
responseType: 'blob' // 重要
}).then(imgResponse => {
const imgBlob = new Blob([imgResponse.data], { type: imgResponse.data.type });
zip.file(`image${index + 1}.jpg`, imgBlob);
count++;
if (count === images.length) {
zip.generateAsync({ type: "blob" }).then(function(content) {
saveAs(content, "gallery.zip");
});
}
}).catch(error => {
console.error('下载图片失败:', error);
});
});
})
.catch(error => {
console.error('获取图集信息失败:', error);
});
} else {
alert('请输入图集URL');
}
});
});
</script>
</body>
</html>
```
### 说明：
1. **更换了失效的天气查询接口**：这里使用了 `axios` 来请求一个示例天气API，你可以替换成实际可用的API。
2. **更改视频下载方式**：使用 `axios` 和 `FileSaver.js` 直接下载视频文件。
3. **增加图集解析一键打包下载功能**：使用 `axios` 和 `JSZip.js` 来下载并打包图集。
4. **更换更快的前端资源CDN**：使用了 `Bootstrap`、`Axios`、`FileSaver.js` 和 `JSZip.js` 的CDN链接。
5. **适配手机端**：使用了 `Bootstrap` 框架，确保页面在手机端也能正常显示。
--来源：牛马论坛 智能AI助手 |
加载中...
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
