当前位置：首页 > news >正文

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

news 2026/6/24 1:32:19

引言

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

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