淘宝商品SKU图自动分类技术深度解析：从DOM容器定位到智能属性识别的完整实现

引言

在淘宝商品数据采集中，SKU（Stock Keeping Unit，库存单位）图是指商品不同规格对应的细节图片，如不同颜色、不同尺码的商品展示图。这些图片数量多、关联性强，手动分类极其耗时，一个商品往往需要5-10分钟手动整理。本文将从技术角度深入解析淘宝SKU图的自动识别与分类技术，包括DOM容器定位、属性名称提取、图片关联等核心模块。类似的技术方案在火蚁一键存图中已有成熟应用。

一、SKU图的结构特征与业务价值

1.1 SKU图的定义与类型

SKU图是商品规格对应的细节图片，是电商运营中最重要的素材类型之一。常见类型包括：

1.2 SKU图在DOM中的组织形式

淘宝的SKU图以“容器-项目”的结构组织：

html

<!-- 淘宝SKU结构示例 --> <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容器的DOM结构分析

2.1 淘宝/天猫SKU容器特征

2.2 不同版本淘宝的SKU结构差异

淘宝在不同时期和不同页面版本中，SKU容器的结构会有所变化：

2.3 SKU容器特征识别

javascript

function analyzeSkuContainer(container) { const analysis = { type: 'unknown', itemCount: 0, hasImages: false, hasNames: false }; const items = container.querySelectorAll('.sku-item, .J_skuItem, .tb-sku-item'); analysis.itemCount = items.length; if (items.length > 0) { const firstItem = items[0]; analysis.hasImages = firstItem.querySelector('img') !== null; analysis.hasNames = firstItem.querySelector('.sku-name, .J_skuName') !== null; if (container.classList.contains('tb-sku')) { analysis.type = 'taobao_old'; } else if (container.classList.contains('J_sku')) { analysis.type = 'taobao_new'; } else { analysis.type = 'generic'; } } return analysis; }

三、多策略容器定位算法

3.1 多选择器定位

javascript

function findSkuContainer() { const selectors = [ // 淘宝/天猫 '.tb-sku', '.J_sku', // 京东 '.sku-img-list', '.J_skuImgList', // 拼多多 '.sku-list', '.J_skuList', // 1688 '.sku-list', '.J_skuList', '.attribute-list', // 通用兜底 '.sku', '[class*="sku"]', '[class*="attribute"]' ]; for (const selector of selectors) { const container = document.querySelector(selector); if (container && isValidSkuContainer(container)) { console.log(`找到SKU容器: ${selector}`); return container; } } return null; } function isValidSkuContainer(container) { if (!container) return false; const images = container.querySelectorAll('img'); return images.length > 0; }

四、属性名称提取的多级降级策略

4.1 名称提取器设计

javascript

class SkuNameExtractor { constructor() { this.prioritySelectors = [ '.sku-name', '.J_skuName', '.tb-sku-name', '.attr-name', '.property-name' ]; } extract(item) { // 第一优先级：专用名称元素 const nameFromElement = this.extractFromElement(item); if (nameFromElement) return nameFromElement; // 第二优先级：data属性 const nameFromDataAttr = this.extractFromDataAttributes(item); if (nameFromDataAttr) return nameFromDataAttr; // 第三优先级：title属性 const nameFromTitle = this.extractFromTitle(item); if (nameFromTitle) return nameFromTitle; // 第四优先级：内部文本 const nameFromText = this.extractFromText(item); if (nameFromText) return nameFromText; return '规格'; } extractFromElement(item) { for (const selector of this.prioritySelectors) { const el = item.querySelector(selector); if (el) { const name = el.textContent?.trim(); if (name && name.length > 0 && name.length < 30) { return name; } } } return null; } extractFromDataAttributes(item) { const attrs = ['data-value', 'data-title', 'data-name', 'data-label']; for (const attr of attrs) { const value = item.getAttribute(attr); if (value && value.length < 30) { return value; } } return null; } extractFromTitle(item) { const title = item.getAttribute('title'); if (title && title.length < 30) { return title; } return null; } extractFromText(item) { const text = item.textContent?.trim(); if (text && text.length > 0 && text.length < 20) { return text; } return null; } }

4.2 名称清洗与规范化

javascript

function normalizeSkuName(name) { if (!name) return '规格'; // 去除首尾空格 name = name.trim(); // 去除多余空白 name = name.replace(/\s+/g, ' '); // 去除特殊符号 name = name.replace(/[#*]/g, ''); // 限制长度 if (name.length > 30) { name = name.substring(0, 30); } // 过滤非法字符（用于文件名） const illegalChars = /[\\/*?:"<>|]/g; name = name.replace(illegalChars, '_'); return name; }

五、SKU图片URL提取与规范化

5.1 图片URL提取

javascript

function extractSkuImage(item) { const img = item.querySelector('img'); if (!img) return null; let url = img.src || img.getAttribute('data-src') || img.getAttribute('data-original'); if (!url) return null; // 转换为原图URL url = url.split('?')[0]; url = url.replace(/_\d+x\d+\./g, '.'); url = url.replace(/\.sum\./g, '.'); url = url.replace(/\.webp$/i, '.jpg'); return url; }

六、异常情况处理与降级方案

6.1 容器等待机制

javascript

async function waitForSkuContainer(timeout = 10000) { const startTime = Date.now(); while (Date.now() - startTime < timeout) { const container = findSkuContainer(); if (container && isValidSkuContainer(container)) { return container; } await sleep(500); } return null; } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }

6.2 降级策略

javascript

async function extractSkuWithFallback() { const platform = detectPlatform(); const extractor = SkuExtractorFactory.create(platform); let results = extractor.extract(); if (results.length > 0) { console.log(`平台专用提取器成功，找到 ${results.length} 个SKU`); return results; } // 降级到通用提取器 console.log('平台专用提取器失败，使用通用提取器'); const genericExtractor = new GenericSkuExtractor(); results = genericExtractor.extract(); if (results.length > 0) { console.log(`通用提取器成功，找到 ${results.length} 个SKU`); return results; } // 最终降级：基于图片尺寸分类 console.log('通用提取器失败，使用尺寸分类降级'); const allImages = document.querySelectorAll('img'); const smallImages = []; for (const img of allImages) { const width = img.naturalWidth || img.width; if (width <= 150 && width > 0) { const url = img.src || img.getAttribute('data-src'); if (url) { smallImages.push({ name: '细节图', url: url }); } } } console.log(`尺寸分类找到 ${smallImages.length} 个图片`); return smallImages; }

七、文件智能命名与归档

7.1 命名规则

javascript

function generateSkuFilename(sku, index) { if (sku.name && sku.name !== '规格' && sku.name !== '细节图') { return `${sanitizeFilename(sku.name)}.jpg`; } return `规格图_${index}.jpg`; } function sanitizeFilename(name) { return name.replace(/[\\/*?:"<>|]/g, '_'); }

7.2 归档结构

javascript

function organizeSkuFiles(skuImages, productTitle, outputDir) { const safeTitle = sanitizeFilename(productTitle); const productDir = `${outputDir}/${safeTitle}`; const skuDir = `${productDir}/SKU图`; const results = []; for (let i = 0; i < skuImages.length; i++) { const sku = skuImages[i]; const filename = generateSkuFilename(sku, i + 1); const filePath = `${skuDir}/${filename}`; results.push({ name: sku.name, url: sku.url, path: filePath, filename: filename }); } return results; }

八、实测数据与总结

8.1 各平台SKU识别率

8.2 总结

SKU图自动分类的核心技术点：

1. 容器定位：多选择器策略兼容不同平台

2. 属性提取：多级降级策略从不同位置提取规格名称

3. 图片关联：将规格名称与对应图片URL绑定

4. 平台适配：针对不同平台使用专用提取器

5. 降级策略：多层降级保证提取成功率

火蚁一键存图正是基于这套完整技术方案实现的，用户无需编写代码，只需复制淘宝商品链接即可自动完成SKU图的分类归档，将原本5-10分钟的手工整理压缩到30秒。

百度搜索“火蚁一键存图”即可找到。