CSDN文章

标题：电商平台SKU图自动分类技术深度解析

引言

很多做电商的朋友在问：“有没有能自动分类颜色图的工具？”“SKU图片怎么按颜色/尺码自动命名？”

做服装、鞋包类目的电商运营都知道，一个商品通常有多个颜色和尺码，每个规格对应独立的SKU图片。手动下载后，所有图片混在一起，文件名是乱码，完全分不清哪个颜色对应哪张图。每个商品要花5-10分钟手动筛选。

本文从技术角度深度解析SKU图的自动识别与分类技术，包括DOM容器定位、属性名称提取、图片关联等核心模块。类似的技术方案在一键存图中已有成熟应用。

目录

1. SKU图的结构特征
2. 各平台SKU容器分析
3. 容器定位策略
4. 属性名称提取算法
5. SKU图片提取与关联
6. 完整分类流程实现
7. 多平台兼容处理
8. 异常情况处理
9. 性能优化策略
10. 文件归档方案
11. 实测数据
12. 总结

一、SKU图的结构特征

1.1 什么是SKU图？

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

• 颜色规格：红色款细节图、蓝色款细节图、黑色款细节图
• 尺码规格：S码细节图、M码细节图、L码细节图
• 型号规格：标准版细节图、Pro版细节图

1.2 SKU图的DOM结构

各电商平台的SKU容器结构虽有差异，但模式相似：

<!-- 淘宝SKU容器 -->
<div class="tb-sku">
    <div class="sku-item" data-value="红色">
        <img src="red_thumb.jpg">
        <span class="sku-name">红色</span>
    </div>
    <div class="sku-item" data-value="蓝色">
        <img src="blue_thumb.jpg">
        <span class="sku-name">蓝色</span>
    </div>
</div>

<!-- 京东SKU容器 -->
<div class="sku-img-list">
    <div class="sku-img-item" title="红色">
        <img src="red_thumb.jpg">
        <span class="sku-name">红色</span>
    </div>
</div>

<!-- 拼多多SKU容器 -->
<div class="sku-list">
    <div class="sku-item" data-value="红色">
        <img src="red_thumb.jpg">
        <span class="sku-name">红色</span>
    </div>
</div>

<!-- 1688SKU容器 -->
<div class="sku-list">
    <div class="sku-item">
        <img src="red_thumb.jpg">
        <span class="sku-name">红色</span>
    </div>
</div>

二、各平台SKU容器分析

2.1 淘宝/天猫

容器	选择器	说明
主容器	.tb-sku, .J_sku	SKU主容器
子项	.sku-item, .J_skuItem	每个SKU项
名称	.sku-name, .J_skuName	SKU名称元素
图片	img	SKU图片

2.2 京东

容器	选择器	说明
主容器	.sku-img-list, .J_skuImgList	SKU主容器
子项	.sku-img-item	每个SKU项
名称	title属性	SKU名称
图片	img	SKU图片

2.3 拼多多

容器	选择器	说明
主容器	.sku-list, .J_skuList	SKU主容器
子项	.sku-item	每个SKU项
名称	.sku-name, data-value	SKU名称
图片	img	SKU图片

2.4 1688

容器	选择器	说明
主容器	.sku-list, .attribute-list	SKU主容器
子项	.sku-item, .attribute-item	每个SKU项
名称	.sku-name, .attr-name	SKU名称
图片	img	SKU图片

三、容器定位策略

3.1 多选择器定位

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 && container.querySelectorAll('img').length > 0) {
            console.log(`找到SKU容器: ${selector}`);
            return container;
        }
    }
    
    console.log('未找到SKU容器');
    return null;
}

3.2 容器有效性验证

function isValidSkuContainer(container) {
    if (!container) return false;
    
    // 必须包含图片
    const images = container.querySelectorAll('img');
    if (images.length === 0) return false;
    
    // 必须包含SKU项
    const items = container.querySelectorAll('.sku-item, .J_skuItem, .sku-img-item');
    if (items.length === 0) return false;
    
    return true;
}

四、属性名称提取算法

4.1 多级降级提取策略

function extractSkuName(item) {
    // 第一优先级：专门的名称元素
    const nameSelectors = [
        '.sku-name',
        '.J_skuName',
        '.tb-sku-name',
        '.attr-name',
        '.property-name'
    ];
    
    for (const selector of nameSelectors) {
        const nameEl = item.querySelector(selector);
        if (nameEl) {
            const name = nameEl.textContent?.trim();
            if (name && name.length > 0 && name.length < 30) {
                console.log(`从名称元素提取: ${name}`);
                return name;
            }
        }
    }
    
    // 第二优先级：data属性
    const dataValue = item.getAttribute('data-value');
    if (dataValue && dataValue.length < 30) {
        console.log(`从data-value提取: ${dataValue}`);
        return dataValue;
    }
    
    const dataTitle = item.getAttribute('data-title');
    if (dataTitle && dataTitle.length < 30) {
        console.log(`从data-title提取: ${dataTitle}`);
        return dataTitle;
    }
    
    // 第三优先级：title属性
    const title = item.getAttribute('title');
    if (title && title.length < 30) {
        console.log(`从title提取: ${title}`);
        return title;
    }
    
    // 第四优先级：内部文本
    const text = item.textContent?.trim();
    if (text && text.length > 0 && text.length < 20) {
        console.log(`从内部文本提取: ${text}`);
        return text;
    }
    
    console.log('未能提取名称，使用默认值');
    return '规格';
}

4.2 名称清洗与规范化

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

五、SKU图片提取与关联

5.1 图片URL提取

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;
}

5.2 图片有效性验证

function isValidImageUrl(url) {
    if (!url) return false;
    if (url.startsWith('data:')) return false;
    if (url.includes('1x1') || url.includes('blank.gif')) return false;
    if (url.includes('loading') || url.includes('placeholder')) return false;
    if (!url.startsWith('http')) return false;
    return true;
}

5.3 完整SKU项解析

function parseSkuItem(item) {
    const name = extractSkuName(item);
    const url = extractSkuImage(item);
    
    if (!url) {
        console.log('SKU项没有图片，跳过');
        return null;
    }
    
    if (!isValidImageUrl(url)) {
        console.log('SKU图片URL无效，跳过');
        return null;
    }
    
    return {
        name: normalizeSkuName(name),
        url: url,
        rawName: name
    };
}

六、完整分类流程实现

6.1 SKU项遍历

function extractSkuItems(container) {
    const skuItems = [];
    
    const itemSelectors = [
        '.sku-item',
        '.J_skuItem',
        '.sku-img-item',
        '.attribute-item',
        '[data-value]'
    ];
    
    let items = [];
    for (const selector of itemSelectors) {
        items = container.querySelectorAll(selector);
        if (items.length > 0) {
            console.log(`使用选择器 ${selector} 找到 ${items.length} 个SKU项`);
            break;
        }
    }
    
    for (const item of items) {
        const skuData = parseSkuItem(item);
        if (skuData) {
            skuItems.push(skuData);
        }
    }
    
    return skuItems;
}

6.2 去重处理

function deduplicateSkuItems(skuItems) {
    const uniqueMap = new Map();
    
    for (const item of skuItems) {
        if (!uniqueMap.has(item.name)) {
            uniqueMap.set(item.name, item);
        } else {
            console.log(`重复SKU: ${item.name}，已忽略`);
        }
    }
    
    return Array.from(uniqueMap.values());
}

6.3 主流程

async function extractAllSkuImages() {
    console.log('开始提取SKU图片...');
    
    // 1. 找到SKU容器
    const container = findSkuContainer();
    if (!container) {
        console.log('未找到SKU容器');
        return [];
    }
    
    // 2. 验证容器有效性
    if (!isValidSkuContainer(container)) {
        console.log('SKU容器无效');
        return [];
    }
    
    // 3. 提取SKU项
    const skuItems = extractSkuItems(container);
    console.log(`提取到 ${skuItems.length} 个SKU项`);
    
    // 4. 去重
    const uniqueItems = deduplicateSkuItems(skuItems);
    console.log(`去重后剩余 ${uniqueItems.length} 个SKU项`);
    
    return uniqueItems;
}

七、多平台兼容处理

7.1 平台检测

function detectPlatform() {
    const host = location.hostname;
    
    if (host.includes('taobao.com') || host.includes('tmall.com')) {
        return 'taobao';
    }
    if (host.includes('jd.com')) {
        return 'jd';
    }
    if (host.includes('yangkeduo.com') || host.includes('pinduoduo.com')) {
        return 'pdd';
    }
    if (host.includes('1688.com')) {
        return '1688';
    }
    if (host.includes('amazon.com')) {
        return 'amazon';
    }
    
    return 'unknown';
}

7.2 平台专用提取器

class PlatformSkuExtractor {
    constructor(platform) {
        this.platform = platform;
    }
    
    extract() {
        switch(this.platform) {
            case 'taobao':
                return this.extractTaobao();
            case 'jd':
                return this.extractJD();
            case 'pdd':
                return this.extractPDD();
            case '1688':
                return this.extract1688();
            default:
                return this.extractGeneric();
        }
    }
    
    extractTaobao() {
        const container = document.querySelector('.tb-sku, .J_sku');
        if (!container) return [];
        
        const items = container.querySelectorAll('.sku-item, .J_skuItem');
        const results = [];
        
        for (const item of items) {
            const nameEl = item.querySelector('.sku-name, .J_skuName');
            const name = nameEl ? nameEl.textContent.trim() : '规格';
            const img = item.querySelector('img');
            if (img && img.src) {
                results.push({ name, url: img.src });
            }
        }
        
        return results;
    }
    
    extractJD() {
        const container = document.querySelector('.sku-img-list, .J_skuImgList');
        if (!container) return [];
        
        const items = container.querySelectorAll('.sku-img-item');
        const results = [];
        
        for (const item of items) {
            const name = item.getAttribute('title') || '规格';
            const img = item.querySelector('img');
            if (img && img.src) {
                results.push({ name, url: img.src });
            }
        }
        
        return results;
    }
    
    extractPDD() {
        const container = document.querySelector('.sku-list, .J_skuList');
        if (!container) return [];
        
        const items = container.querySelectorAll('.sku-item');
        const results = [];
        
        for (const item of items) {
            const nameEl = item.querySelector('.sku-name');
            const name = nameEl ? nameEl.textContent.trim() : (item.getAttribute('data-value') || '规格');
            const img = item.querySelector('img');
            if (img && img.src) {
                results.push({ name, url: img.src });
            }
        }
        
        return results;
    }
    
    extract1688() {
        const container = document.querySelector('.sku-list, .attribute-list');
        if (!container) return [];
        
        const items = container.querySelectorAll('.sku-item, .attribute-item');
        const results = [];
        
        for (const item of items) {
            const nameEl = item.querySelector('.sku-name, .attr-name');
            const name = nameEl ? nameEl.textContent.trim() : '规格';
            const img = item.querySelector('img');
            if (img && img.src) {
                results.push({ name, url: img.src });
            }
        }
        
        return results;
    }
    
    extractGeneric() {
        return extractAllSkuImages();
    }
}

八、异常情况处理

8.1 容器加载等待

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));
}

8.2 降级策略

async function extractSkuWithFallback() {
    // 优先使用专用提取器
    const platform = detectPlatform();
    const extractor = new PlatformSkuExtractor(platform);
    let results = extractor.extract();
    
    if (results.length > 0) {
        console.log(`使用平台专用提取器，找到 ${results.length} 个SKU`);
        return results;
    }
    
    // 降级到通用提取器
    console.log('平台专用提取器失败，使用通用提取器');
    results = await extractAllSkuImages();
    
    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) {
            smallImages.push({
                name: '细节图',
                url: img.src
            });
        }
    }
    
    console.log(`尺寸分类找到 ${smallImages.length} 个图片`);
    return smallImages;
}

九、性能优化策略

9.1 批量处理优化

class BatchSkuExtractor {
    constructor(batchSize = 10) {
        this.batchSize = batchSize;
    }
    
    async extractLargeSkuList(items) {
        const results = [];
        
        for (let i = 0; i < items.length; i += this.batchSize) {
            const batch = items.slice(i, i + this.batchSize);
            const batchResults = await this.processBatch(batch);
            results.push(...batchResults);
            
            // 让出主线程
            await this.sleep(0);
        }
        
        return results;
    }
    
    async processBatch(batch) {
        const results = [];
        for (const item of batch) {
            const skuData = parseSkuItem(item);
            if (skuData) results.push(skuData);
        }
        return results;
    }
    
    sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

9.2 缓存策略

class SkuCache {
    constructor() {
        this.cache = new Map();
        this.maxSize = 100;
    }
    
    get(key) {
        return this.cache.get(key);
    }
    
    set(key, value) {
        if (this.cache.size >= this.maxSize) {
            const firstKey = this.cache.keys().next().value;
            this.cache.delete(firstKey);
        }
        this.cache.set(key, value);
    }
    
    clear() {
        this.cache.clear();
    }
    
    has(key) {
        return this.cache.has(key);
    }
}

十、文件归档方案

10.1 命名规则

function generateSkuFilename(sku, index) {
    // 优先使用SKU名称
    if (sku.name && sku.name !== '规格') {
        return `${sanitizeFilename(sku.name)}.jpg`;
    }
    
    // 使用序号
    return `规格图_${index}.jpg`;
}

function sanitizeFilename(name) {
    return name.replace(/[\\/*?:"<>|]/g, '_');
}

10.2 目录结构

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;
}

十一、实测数据

11.1 各平台SKU识别率

平台	测试商品数	识别成功	识别率
淘宝	100	96	96%
京东	100	92	92%
拼多多	100	91	91%
1688	100	95	95%

11.2 性能数据

指标	数据
容器定位时间	10-50ms
SKU项提取时间	50-100ms
图片URL转换时间	1-2ms/个
单个商品总耗时	1-2秒

十二、总结

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

1. 容器定位：多选择器策略兼容不同平台
2. 属性提取：多级降级策略从不同位置提取规格名称
3. 图片关联：将规格名称与对应图片URL绑定
4. 平台适配：针对不同平台使用专用提取器
5. 降级策略：多层降级保证提取成功率
6. 性能优化：批量处理和缓存提升效率

类似一键存图的工具已经将这些技术封装成成熟产品，用户无需编写代码，只需复制商品链接即可自动完成SKU图的分类归档，将原来5-10分钟的手工整理压缩到30秒。

免责声明：本文内容仅供技术交流和学习参考。电商平台的数据采集行为可能涉及平台服务条款、著作权法等法律问题。请确保遵守目标网站的《用户协议》和相关法律法规。因不当使用引发的法律风险由使用者自行承担。

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