主图、SKU、详情和视频打包下载
当前为
// ==UserScript==
// @name 淘宝天猫图片打包下载
// @version 2024.10.18
// @description 主图、SKU、详情和视频打包下载
// @author Suren_Chan
// @match *://item.taobao.com/*
// @match *://detail.tmall.com/*
// @include https://item.taobao.com/item.htm?*
// @include https://detail.tmall.com/item.htm?*//
// @require https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @license MIT
// @grant none
// @namespace https://greasyfork.org/users/786427
// ==/UserScript==
(function() {
'use strict';
// 创建进度条容器
const progressContainer = document.createElement('div');
progressContainer.style.position = 'fixed';
progressContainer.style.top = '50%';
progressContainer.style.left = '50%';
progressContainer.style.transform = 'translate(-50%, -50%)';
progressContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
progressContainer.style.color = '#fff';
progressContainer.style.padding = '20px';
progressContainer.style.borderRadius = '10px';
progressContainer.style.zIndex = '9999';
progressContainer.style.display = 'none'; // 默认隐藏
// 创建进度条
const progressBar = document.createElement('div');
progressBar.style.width = '100%';
progressBar.style.backgroundColor = '#ddd';
progressBar.style.borderRadius = '5px';
const progressFill = document.createElement('div');
progressFill.style.width = '0%';
progressFill.style.height = '20px';
progressFill.style.backgroundColor = '#4caf50';
progressFill.style.borderRadius = '5px';
progressBar.appendChild(progressFill);
progressContainer.appendChild(progressBar);
document.body.appendChild(progressContainer);
// 创建外部 div
const customDiv = document.createElement('div');
customDiv.style.position = 'fixed';
customDiv.style.width = '56px';
customDiv.style.height = '90px';
customDiv.style.backgroundColor = '#fff';
customDiv.style.right = '0px';
customDiv.style.top = '300px';
customDiv.style.zIndex = '9999';
customDiv.style.borderRadius = '18px 0 0 18px';
customDiv.style.boxShadow = '-2px 0 30px 2px rgba(97, 105, 119, 0.18)';
customDiv.style.cursor = 'pointer';
// 创建包含 SVG 的 div
const svgContainer = document.createElement('div');
svgContainer.style.textAlign = 'center';
svgContainer.style.paddingTop = '20px';
// 创建 SVG
const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgIcon.setAttribute('width', '32');
svgIcon.setAttribute('height', '32');
svgIcon.innerHTML = `<svg t="1729178743032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4764" width="32" height="32"><path d="M895.5 831.7H128c-35.1 0-63.8 28.7-63.8 63.8 0 35.1 28.7 63.8 63.8 63.8h767.5c35.1 0 63.8-28.7 63.8-63.8 0-35.1-28.7-63.8-63.8-63.8zM811 383H672.2V123.8c0-33.3-27-60.4-60.4-60.4H412.4c-33.3 0-60.4 27-60.4 60.4V383H213.2c-26.7 0-40.7 31.8-22.5 51.5L489.6 758c12.1 13.1 32.9 13.1 45.1 0l298.8-323.5c18.1-19.7 4.2-51.5-22.5-51.5z" fill="#2196F3" p-id="4765"></path></svg>`;
svgContainer.appendChild(svgIcon);
// 创建 p 标签并设置文本和样式
const pTag = document.createElement('p');
pTag.textContent = '下载';
pTag.style.color = '#2196F3';
pTag.style.textAlign = 'center';
customDiv.appendChild(svgContainer);
customDiv.appendChild(pTag);
// 添加点击事件
customDiv.addEventListener('click', async function() {
// 显示进度条
progressContainer.style.display = 'block';
progressFill.style.width = '0%'; // 重置进度条
// 获取 id 为 content 的 div
const contentDiv = document.getElementById('content');
if (!contentDiv) {
alert('未找到指定的 div!');
progressContainer.style.display = 'none'; // 隐藏进度条
return;
}
// 获取所有 img 标签
const images = contentDiv.getElementsByTagName('img');
const imageUrls = [];
for (let i = 0; i < images.length; i++) {
const imgSrc = images[i].src;
let modifiedUrl = imgSrc;
let fileExtension = '';
if (imgSrc.endsWith('.jpg') || imgSrc.endsWith('.jpeg')) {
modifiedUrl = imgSrc.split('.jpg')[0];
fileExtension = '.jpg';
} else if (imgSrc.endsWith('.png')) {
modifiedUrl = imgSrc.split('.png')[0];
fileExtension = '.png';
} else if (imgSrc.endsWith('.gif')) {
modifiedUrl = imgSrc.split('.gif')[0];
fileExtension = '.gif';
} else {
continue; // 跳过不支持的格式
}
imageUrls.push({ url: modifiedUrl, extension: fileExtension });
}
// 创建一个 JSZip 实例
const zip = new JSZip();
// 下载图片并添加到 ZIP
for (let i = 0; i < imageUrls.length; i++) {
const { url, extension } = imageUrls[i];
const fullUrl = url + extension; // 根据格式添加后缀
const response = await fetch(fullUrl);
const blob = await response.blob();
// 更新进度
const progressPercentage = ((i + 1) / imageUrls.length) * 100;
progressFill.style.width = `${progressPercentage}%`;
const imgNumber = (i + 1).toString().padStart(2, '0');
zip.file(`image${imgNumber}${extension}`, blob); // 添加到 ZIP
}
// 生成 ZIP 文件并下载
zip.generateAsync({ type: 'blob' })
.then(function(content) {
saveAs(content, 'images.zip'); // 下载 ZIP
progressContainer.style.display = 'none'; // 隐藏进度条
});
});
// 将 div 添加到页面
document.body.appendChild(customDiv);
})();