淘宝SKU颜色图自动分类功能是怎么实现的?

📅 2026/6/24 1:27:46
淘宝SKU颜色图自动分类功能是怎么实现的?
引言很多做淘宝的朋友在问“有没有能批量下载淘宝和天猫店铺商品图片的软件”做服装类目的淘宝卖家都知道一个商品通常有多个颜色和尺码。每个规格都有对应的细节图。手动下载后所有图片混在一起文件名是乱码根本分不清哪个颜色对应哪张图。每个商品要花5-10分钟手动筛选。为什么有些工具能做到自动分类本文从技术角度解释SKU图自动分类的原理。一、什么是SKU图SKUStock Keeping Unit库存单位图是指商品不同规格对应的细节图片。类型说明示例颜色图不同颜色的商品展示红色款、蓝色款、黑色款尺码图不同尺码的细节展示S码、M码、L码型号图不同型号的配置展示标准版、Pro版二、SKU图在淘宝页面中的位置淘宝的SKU图位于特定的DOM容器中htmldiv classtb-sku div classsku-item data-value红色 img src//img.alicdn.com/red_50x50.jpg span classsku-name红色/span /div div classsku-item data-value蓝色 img src//img.alicdn.com/blue_50x50.jpg span classsku-name蓝色/span /div /div每个SKU项包含三部分信息规格名称红色、蓝色规格图片数据属性data-value三、自动分类的实现原理3.1 第一步定位SKU容器javascriptfunction findSkuContainer() { const selectors [.tb-sku, .J_sku, .sku]; for (const selector of selectors) { const container document.querySelector(selector); if (container container.querySelectorAll(img).length 0) { return container; } } return null; }3.2 第二步提取规格名称javascriptfunction extractSkuName(item) { // 从名称元素提取 const nameEl item.querySelector(.sku-name, .J_skuName); if (nameEl) return nameEl.textContent.trim(); // 从data属性提取 const dataValue item.getAttribute(data-value); if (dataValue) return dataValue; // 从title属性提取 const title item.getAttribute(title); if (title) return title; return 规格; }3.3 第三步提取图片URL并转换为原图javascriptfunction getOriginalUrl(url) { if (!url) return null; url url.split(?)[0]; url url.replace(/_\dx\d\./g, .); return url; } function extractSkuImage(item) { const img item.querySelector(img); if (!img) return null; const url img.src || img.getAttribute(data-src); return getOriginalUrl(url); }3.4 第四步关联名称与图片javascriptfunction extractAllSkuImages() { const container findSkuContainer(); if (!container) return []; const items container.querySelectorAll(.sku-item, .J_skuItem); const results []; for (const item of items) { const name extractSkuName(item); const url extractSkuImage(item); if (url) { results.push({ name, url }); } } return results; }四、分类后的文件结构text商品标题/ ├── 主图/ │ ├── 主图_1.jpg │ ├── 主图_2.jpg │ └── 主图_3.jpg ├── SKU图/ │ ├── 红色.jpg │ ├── 蓝色.jpg │ ├── S码.jpg │ ├── M码.jpg │ └── L码.jpg └── 详情图/ ├── 详情图_1.jpg └── 详情图_2.jpg五、爬虫方案与浏览器方案的对比对比项爬虫方案浏览器方案SKU图分类大多不支持✅ 支持淘宝改版影响工具失效无影响图片质量可能缩略图原图采集成功率70-80%99%六、常见问题问SKU图自动分类需要什么条件答需要工具能够正确解析SKU容器的DOM结构提取规格名称并关联对应图片。问淘宝改版后SKU图分类会失效吗答爬虫方案会失效。浏览器方案不依赖特定CSS类名淘宝改版不影响。问哪些工具支持SKU图自动分类答火蚁一键存图等基于浏览器方案的工具支持SKU图自动分类。七、总结SKU图自动分类的核心原理是定位SKU容器 → 提取规格名称 → 提取对应图片 → 按名称归档。火蚁一键存图正是基于这套原理实现的用户无需手动整理下载后SKU图自动按颜色/尺码分类命名。