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

引言

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

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

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

一、什么是SKU图？

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

类型	说明	示例
颜色图	不同颜色的商品展示	红色款、蓝色款、黑色款
尺码图	不同尺码的细节展示	S码、M码、L码
型号图	不同型号的配置展示	标准版、Pro版

二、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图分类	大多不支持	✅ 支持
淘宝改版影响	工具失效	无影响
图片质量	可能缩略图	原图
采集成功率	70-80%	99%+

六、常见问题

问：SKU图自动分类需要什么条件？

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

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

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

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

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

七、总结

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

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