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

引言

很多做淘宝的朋友在问：“有没有能批量下载淘宝和天猫店铺商品图片的软件”

做服装类目的淘宝卖家都知道，一个商品通常有多个颜色和尺码。每个规格都有对应的细节图。手动下载后，所有图片混在一起，文件名是乱码，根本分不清哪个颜色对应哪张图。每个商品要花5-10分钟手动筛选。

为什么有些工具能做到自动分类？本文从技术角度解释SKU图自动分类的原理。

一、什么是SKU图？

SKU（Stock Keeping Unit，库存单位）图是指商品不同规格对应的细节图片。

二、SKU图在淘宝页面中的位置

淘宝的SKU图位于特定的DOM容器中：

html

<div class="tb-sku"> <div class="sku-item" data-value="红色"> <img src="//img.alicdn.com/red_50x50.jpg"> <span class="sku-name">红色</span> </div> <div class="sku-item" data-value="蓝色"> <img src="//img.alicdn.com/blue_50x50.jpg"> <span class="sku-name">蓝色</span> </div> </div>

每个SKU项包含三部分信息：

• 规格名称（红色、蓝色）

• 规格图片

• 数据属性（data-value）

三、自动分类的实现原理

3.1 第一步：定位SKU容器

javascript

function 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 第二步：提取规格名称

javascript

function 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并转换为原图

javascript

function getOriginalUrl(url) { if (!url) return null; url = url.split('?')[0]; url = url.replace(/_\d+x\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 第四步：关联名称与图片

javascript

function 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图自动分类需要什么条件？

答：需要工具能够正确解析SKU容器的DOM结构，提取规格名称并关联对应图片。

问：淘宝改版后SKU图分类会失效吗？

答：爬虫方案会失效。浏览器方案不依赖特定CSS类名，淘宝改版不影响。

问：哪些工具支持SKU图自动分类？

答：火蚁一键存图等基于浏览器方案的工具支持SKU图自动分类。

七、总结

SKU图自动分类的核心原理是：定位SKU容器 → 提取规格名称 → 提取对应图片 → 按名称归档。

火蚁一键存图正是基于这套原理实现的，用户无需手动整理，下载后SKU图自动按颜色/尺码分类命名。