主图、SKU、详情和视频打包下载
目前為
// ==UserScript==
// @name 淘宝天猫图片打包下载
// @version 2024.11.12
// @description 主图、SKU、详情和视频打包下载
// @author Suren_Chan
// @match https://detail.tmall.com/*
// @match https://item.taobao.com/*
// @match https://item.taobao.com/item.htm?*
// @match https://detail.tmall.com/item.htm?*
// @description 下载页面中的图片并打包为 ZIP 文件，生成整版详情长图和调整图片宽度为 790px 的独立图片文件集一起下载。
// @author Suren_Chan
// @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==
// @grant none
// @license MIT
// @namespace https://gf.qytechs.cn/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 = [];
let totalHeight = 0;
// 创建一个 JSZip 实例
const zip = new JSZip();
const slicesFolder = zip.folder('切片'); // 创建“切片”文件夹
// 加载和调整图片
const resizedImages = await Promise.all(Array.from(images).map(async (img, index) => {
const imgSrc = img.src;
const imgExt = imgSrc.match(/\.(jpg|jpeg|png|gif)$/i)?.[0] || '.jpg';
const response = await fetch(imgSrc);
const blob = await response.blob();
const bitmap = await createImageBitmap(blob);
// 计算新的高度等比缩放
const newHeight = Math.floor(bitmap.height * (790 / bitmap.width));
totalHeight += newHeight;
// 创建 canvas 调整图片大小
const canvas = document.createElement('canvas');
canvas.width = 790;
canvas.height = newHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(bitmap, 0, 0, 790, newHeight);
// 将调整后的图像添加到 ZIP 文件的 "切片" 文件夹
const imgBlob = await new Promise((resolve) => canvas.toBlob(resolve, `image/${imgExt.replace('.', '')}`));
slicesFolder.file(`image${String(index + 1).padStart(2, '0')}${imgExt}`, imgBlob);
// 返回 canvas，用于拼接整版图片
return canvas;
}));
// 拼接所有调整后的图片成一张长图
const fullCanvas = document.createElement('canvas');
fullCanvas.width = 790;
fullCanvas.height = totalHeight;
const fullCtx = fullCanvas.getContext('2d');
let currentHeight = 0;
for (const canvas of resizedImages) {
fullCtx.drawImage(canvas, 0, currentHeight);
currentHeight += canvas.height;
}
// 将整版长图转换为 PNG 并添加到 ZIP 文件
const fullBlob = await new Promise((resolve) => fullCanvas.toBlob(resolve, 'image/png'));
zip.file('整版详情.png', fullBlob);
// 更新进度条到完成
progressFill.style.width = '100%';
// 生成 ZIP 文件并下载
zip.generateAsync({ type: 'blob' })
.then(function(content) {
saveAs(content, 'images.zip'); // 使用 FileSaver.js 下载 ZIP
progressContainer.style.display = 'none'; // 隐藏进度条
});
});
// 将 div 添加到页面
document.body.appendChild(customDiv);
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址