QQ截图20251009115806.png

<!DOCTYPE html> <html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>淘宝图片提取助手</title>
<style>
    :root {
        --primary-color: #fd5e02;
        --bg-color: #f8f9fa;
        --card-color: #ffffff;
        --border-color: #e9ecef;
        --text-color: #333333;
        --button-hover: #e65500;
        --error-color: #ff4d4f;
    }
     
    body {
        font-family: 'Segoe UI', 'PingFang SC', sans-serif;
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;
        background-color: var(--bg-color);
        color: var(--text-color);
    }
     
    .container {
        background: var(--card-color);
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
     
    h2 {
        color: var(--text-color);
        border-bottom: 2px solid var(--primary-color);
        padding-bottom: 8px;
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: 600;
    }
     
    .input-area {
        margin-bottom: 25px;
    }
     
    textarea {
        width: 100%;
        height: 120px;
        padding: 12px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.5;
        resize: vertical;
        transition: border-color 0.2s;
        outline: none;
    }
     
    textarea:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(253, 94, 2, 0.1);
    }
     
    button {
        background-color: var(--primary-color);
        color: white;
        padding: 10px 18px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        margin-right: 10px;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
     
    button:hover {
        background-color: var(--button-hover);
        transform: translateY(-1px);
    }
     
    button:active {
        transform: translateY(0);
    }
     
    .image-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
        margin-top: 25px;
    }
     
    .image-item {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 14px;
        text-align: center;
        background: var(--card-color);
        transition: all 0.2s;
        overflow: hidden;
        position: relative;
    }
     
    .image-item:hover {
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
        transform: translateY(-2px);
    }
     
    img {
        max-width: 100%;
        height: auto;
        margin-bottom: 12px;
        border-radius: 6px;
        object-fit: cover;
        max-height: 200px;
    }
     
    p {
        margin: 0;
        padding: 0;
        font-size: 13px;
        color: #666;
        margin-bottom: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
     
    .open-btn {
        display: inline-block;
        background-color: var(--primary-color);
        color: white;
        padding: 8px 14px;
        border-radius: 6px;
        text-decoration: none;
        font-size: 13px;
        transition: all 0.2s;
        width: 80%;
        cursor: pointer;
        margin-bottom: 8px;
    }
     
    .open-btn:hover {
        background-color: var(--button-hover);
        transform: translateY(-1px);
    }
     
    .open-btn:active {
        transform: translateY(0);
    }
     
    .download-btn {
        display: inline-block;
        background-color: #4CAF50;
        color: white;
        padding: 8px 14px;
        border-radius: 6px;
        text-decoration: none;
        font-size: 13px;
        transition: all 0.2s;
        width: 80%;
        cursor: pointer;
    }
     
    .download-btn:hover {
        background-color: #45a049;
        transform: translateY(-1px);
    }
     
    .download-btn:active {
        transform: translateY(0);
    }
     
    /* 响应式设计 */
    @media (max-width: 600px) {
        body {
            padding: 10px;
        }
         
        .container {
            padding: 18px;
        }
         
        button {
            width: 100%;
            margin-bottom: 10px;
        }
         
        .image-list {
            grid-template-columns: 1fr;
        }
    }
     
    .error-message {
        color: var(--error-color);
        font-size: 14px;
        margin: 10px 0;
        padding: 8px 12px;
        background-color: rgba(255, 77, 79, 0.05);
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
     
    .error-message svg {
        margin-right: 6px;
        width: 16px;
        height: 16px;
    }
     
    .notice {
        margin: 15px 0;
        padding: 12px;
        background-color: rgba(253, 94, 2, 0.05);
        border-radius: 6px;
        border-left: 4px solid var(--primary-color);
        color: #666;
        font-size: 14px;
    }
     
    .toast {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px 16px;
        border-radius: 4px;
        font-size: 14px;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s;
    }
     
    .toast.show {
        opacity: 1;
    }
</style> </head> <body>
<div class="container">
    <h2>淘宝图片提取助手</h2>
     
    <div class="notice">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="float: left; margin-right: 8px;">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="16" x2="12" y2="12"></line>
            <line x1="12" y1="8" x2="12.01" y2="8"></line>
        </svg>
        <p>提示:由于淘宝图片设置了防盗链,直接下载可能失败。建议使用"在新窗口打开图片"功能,并在浏览器中右键保存图片。</p>
    </div>
     
    <div class="input-area">
        <textarea id="urlInput" placeholder="请输入淘宝图片链接(每行一个)"></textarea>
        <br>
        <button>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
                <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
                <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
                <line x1="12" y1="8" x2="12" y2="16"></line>
                <line x1="16" y1="12" x2="12" y2="12"></line>
                <line x1="8" y1="12" x2="8" y2="12"></line>
            </svg>
            提取图片
        </button>
        <button>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
                <path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path>
                <line x1="18" y1="9" x2="12" y2="15"></line>
                <line x1="12" y1="9" x2="18" y2="15"></line>
            </svg>
            清空结果
        </button>
    </div>
    <div id="imageContainer" class="image-list"></div>
    <div id="errorContainer"></div>
</div>
 
<!-- 提示框 -->
<div id="toast" class="toast">下载操作已触发</div>
 
<script>
    function extractImages() {
        const urlInput = document.getElementById('urlInput');
        const imageContainer = document.getElementById('imageContainer');
        const errorContainer = document.getElementById('errorContainer');
         
        imageContainer.innerHTML = ''; // 清空旧结果
        errorContainer.innerHTML = ''; // 清空错误信息
         
        const urls = urlInput.value.trim().split('\n');
        let errorCount = 0;
         
        urls.forEach(url => {
            if (!url.trim()) return; // 跳过空行
             
            try {
                // 优化正则表达式,支持更多图片格式并只保留第一个扩展名
                const cleanedUrl = url.replace(/\.(jpg|jpeg|png|gif)(\?.*|#.*|_.*|$)/i, '.$1');
                 
                // 创建图片元素
                const imgDiv = document.createElement('div');
                imgDiv.className = 'image-item';
                imgDiv.innerHTML = `
                    <img src="${cleanedUrl}" alt="提取的图片">
                    <p>原始链接:${url}</p>
                    <p>处理后链接:${cleanedUrl}</p>
                    <button class="open-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;">
                            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                            <polyline points="15 3 21 3 21 9"></polyline>
                            <line x1="10" y1="14" x2="21" y2="3"></line>
                        </svg>
                        在新窗口打开图片
                    </button>
                    <button class="download-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            <polyline points="7 10 12 15 17 10"></polyline>
                            <line x1="12" y1="15" x2="12" y2="3"></line>
                        </svg>
                        尝试下载图片
                    </button>
                `;
                imageContainer.appendChild(imgDiv);
            } catch (error) {
                errorCount++;
                // 只显示第一个错误,避免太多错误信息
                if (errorCount === 1) {
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'error-message';
                    errorDiv.innerHTML = `
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="8" x2="12" y2="12"></line>
                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
                        </svg>
                        处理链接时出错:${url}
                    `;
                    errorContainer.appendChild(errorDiv);
                }
            }
        });
         
        // 如果没有提取到任何图片,显示提示
        if (imageContainer.children.length === 0) {
            const emptyDiv = document.createElement('div');
            emptyDiv.className = 'image-item';
            emptyDiv.innerHTML = `
                <div style="padding: 20px; color: #999;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin: 0 auto 10px; display: block;">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="16" x2="12" y2="12"></line>
                        <line x1="12" y1="8" x2="12.01" y2="8"></line>
                    </svg>
                    没有找到有效的图片链接
                </div>
            `;
            imageContainer.appendChild(emptyDiv);
        }
    }
 
    // 从URL中提取文件名
    function getFileName(url) {
        const parts = url.split('/');
        return parts[parts.length - 1].split('?')[0].split('#')[0];
    }
 
    // 清空结果
    function clearImages() {
        document.getElementById('urlInput').value = '';
        document.getElementById('imageContainer').innerHTML = '';
        document.getElementById('errorContainer').innerHTML = '';
    }
     
    // 在新窗口打开图片链接
    function openInNewTab(url) {
        window.open(url, '_blank');
    }
     
    // 下载图片
    function downloadImage(url, filename) {
        showToast("正在尝试下载...");
         
        fetch(url, {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Referer': 'https://item.taobao.com/' // 设置淘宝商品页面的Referer,可能有助于绕过防盗链
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.blob();
        })
        .then(blob => {
            // 创建下载链接
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            showToast("下载已触发,请检查浏览器下载提示");
        })
        .catch(error => {
            console.error('下载图片时出错:', error);
            showToast("下载失败,请尝试使用'在新窗口打开'功能");
        });
    }
     
    // 显示提示框
    function showToast(message) {
        const toast = document.getElementById('toast');
        toast.textContent = message;
        toast.classList.add('show');
         
        setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }
</script> </body> </html>

转自吾爱破解

最后修改:2025 年 10 月 09 日
如果觉得我的文章对你有用,请随意赞赏