{"id":181,"date":"2026-03-30T16:01:50","date_gmt":"2026-03-30T08:01:50","guid":{"rendered":"http:\/\/47.100.88.125\/?page_id=181"},"modified":"2026-04-08T15:51:20","modified_gmt":"2026-04-08T07:51:20","slug":"%e5%9b%be%e7%89%87%e4%b8%80%e9%94%ae%e5%8e%8b%e7%bc%a9","status":"publish","type":"page","link":"https:\/\/www.05621997.xyz\/index.php\/tools\/%e5%9b%be%e7%89%87%e4%b8%80%e9%94%ae%e5%8e%8b%e7%bc%a9\/","title":{"rendered":"\u56fe\u7247\u4e00\u952e\u538b\u7f29"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"181\" class=\"elementor elementor-181\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ad86894 e-con-full e-flex e-con e-parent\" data-id=\"ad86894\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d202ee8 elementor-widget elementor-widget-heading\" data-id=\"d202ee8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u56fe\u7247\u4e00\u952e\u538b\u7f29<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-777fd74 e-con-full e-flex e-con e-parent\" data-id=\"777fd74\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c19f6f elementor-widget elementor-widget-html\" data-id=\"2c19f6f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"lcic-main-container\">\r\n    <div class=\"lcic-tabs\">\r\n        <button class=\"lcic-tab-btn active\" data-tab=\"fast\">\u5feb\u901f\u538b\u7f29<\/button>\r\n        <button class=\"lcic-tab-btn\" data-tab=\"custom\">\u81ea\u5b9a\u4e49\u5c3a\u5bf8\u538b\u7f29<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"lcic-tab-content active\" id=\"fastTab\">\r\n        <div class=\"lcic-upload-box\">\r\n            <button class=\"lcic-upload-btn\">\u9009\u62e9\u672c\u5730\u56fe\u7247<\/button>\r\n            <input type=\"file\" class=\"lcic-file-input\" accept=\"image\/*\" hidden>\r\n            <p class=\"lcic-tip\">\u56fa\u5b9a\u5bbd\u5ea6500px\uff0c\u9ad8\u5ea6\u81ea\u9002\u5e94 | \u652f\u6301JPG\/PNG\/WebP<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"lcic-tab-content\" id=\"customTab\">\r\n        <div class=\"lcic-upload-box\">\r\n            <button class=\"lcic-upload-btn\">\u9009\u62e9\u672c\u5730\u56fe\u7247<\/button>\r\n            <input type=\"file\" class=\"lcic-file-input\" accept=\"image\/*\" hidden>\r\n            <p class=\"lcic-tip\">\u4ec5\u9700\u586b\u5199\u5bbd\u5ea6\u6216\u9ad8\u5ea6\uff0c\u81ea\u52a8\u7b49\u6bd4\u4f8b\u538b\u7f29 | \u652f\u6301JPG\/PNG\/WebP<\/p>\r\n        <\/div>\r\n        <div class=\"lcic-custom-size\">\r\n            <div class=\"lcic-size-item\">\r\n                <label>\u5bbd\u5ea6(px)\uff1a<\/label>\r\n                <input type=\"number\" class=\"lcic-size-input\" id=\"customWidth\" min=\"1\" placeholder=\"\">\r\n            <\/div>\r\n            <div class=\"lcic-size-item\">\r\n                <label>\u9ad8\u5ea6(px)\uff1a<\/label>\r\n                <input type=\"number\" class=\"lcic-size-input\" id=\"customHeight\" min=\"1\" placeholder=\"\">\r\n            <\/div>\r\n        <\/div>\r\n        <p class=\"lcic-error-tip\" id=\"sizeTip\"><\/p>\r\n    <\/div>\r\n\r\n    <div class=\"lcic-preview-box\" id=\"lcicPreviewBox\" style=\"display: none;\">\r\n        <div class=\"lcic-preview-item\">\r\n            <p class=\"lcic-label\">\u539f\u59cb\u56fe\u7247<\/p>\r\n            <img id=\"lcicOriginalImg\" class=\"lcic-img-preview\">\r\n        <\/div>\r\n        <div class=\"lcic-preview-item\">\r\n            <p class=\"lcic-label\">\u538b\u7f29\u540e\u56fe\u7247<\/p>\r\n            <img id=\"lcicCompressedImg\" class=\"lcic-img-compressed\">\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <button class=\"lcic-download-btn\" id=\"lcicDownloadBtn\" style=\"display: none;\">\u4e0b\u8f7d\u538b\u7f29\u540e\u7684\u56fe\u7247<\/button>\r\n<\/div>\r\n\r\n<style>\r\n.lcic-page-title {\r\n    margin-top: 0 !important;\r\n    padding-top: 0 !important;\r\n    margin-bottom: 20px;\r\n    text-align: center;\r\n    font-size: 24px;\r\n    font-weight: 600;\r\n    color: #333;\r\n    line-height: 1.3;\r\n}\r\n.lcic-main-container {\r\n    width: 100%;\r\n    max-width: 600px;\r\n    margin: 0 auto 20px;\r\n    padding: 25px;\r\n    border: 1px solid #e4e4e4;\r\n    border-radius: 8px;\r\n    background: #ffffff;\r\n    box-sizing: border-box;\r\n}\r\n.lcic-tabs {\r\n    display: flex;\r\n    gap: 10px;\r\n    margin-bottom: 20px;\r\n    border-bottom: 1px solid #e4e4e4;\r\n    padding-bottom: 10px;\r\n}\r\n.lcic-tab-btn {\r\n    padding: 8px 20px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    background: #f5f5f5;\r\n    color: #666;\r\n    cursor: pointer;\r\n    transition: all 0.3s;\r\n    font-size: 14px;\r\n}\r\n.lcic-tab-btn.active {\r\n    background: #2d8cf0;\r\n    color: #fff;\r\n}\r\n.lcic-tab-content {\r\n    display: none;\r\n}\r\n.lcic-tab-content.active {\r\n    display: block;\r\n}\r\n.lcic-custom-size {\r\n    display: flex;\r\n    gap: 20px;\r\n    justify-content: center;\r\n    margin-bottom: 15px;\r\n    align-items: center;\r\n}\r\n.lcic-size-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n}\r\n.lcic-size-item label {\r\n    font-size: 14px;\r\n    color: #333;\r\n}\r\n.lcic-size-input {\r\n    width: 100px;\r\n    padding: 6px 8px;\r\n    border: 1px solid #e4e4e4;\r\n    border-radius: 4px;\r\n    outline: none;\r\n    font-size: 14px;\r\n}\r\n.lcic-size-input:focus {\r\n    border-color: #2d8cf0;\r\n}\r\n.lcic-error-tip {\r\n    text-align: center;\r\n    font-size: 12px;\r\n    color: #f56c6c;\r\n    margin: 0 0 10px;\r\n    height: 16px;\r\n}\r\n.lcic-upload-box {\r\n    text-align: center;\r\n    margin-bottom: 20px;\r\n}\r\n.lcic-upload-btn {\r\n    padding: 10px 20px;\r\n    background: #2d8cf0;\r\n    color: #fff;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    transition: background 0.3s;\r\n}\r\n.lcic-upload-btn:hover {\r\n    background: #1b74d1;\r\n}\r\n.lcic-tip {\r\n    margin-top: 10px;\r\n    font-size: 12px;\r\n    color: #666;\r\n}\r\n.lcic-preview-box {\r\n    display: flex;\r\n    gap: 30px;\r\n    justify-content: center;\r\n    align-items: center;\r\n    margin: 20px 0;\r\n    padding: 15px;\r\n    border: 1px dashed #e4e4e4;\r\n    border-radius: 6px;\r\n}\r\n.lcic-preview-item {\r\n    text-align: center;\r\n}\r\n.lcic-label {\r\n    font-size: 13px;\r\n    color: #333;\r\n    margin-bottom: 8px;\r\n    font-weight: 500;\r\n}\r\n.lcic-img-preview {\r\n    max-width: 150px;\r\n    max-height: 150px;\r\n    object-fit: contain;\r\n    border: 1px solid #f0f0f0;\r\n}\r\n.lcic-img-compressed {\r\n    max-width: 200px;\r\n    max-height: 200px;\r\n    object-fit: contain;\r\n    border: 1px solid #f0f0f0;\r\n}\r\n.lcic-download-btn {\r\n    display: block;\r\n    width: 100%;\r\n    padding: 10px;\r\n    background: #00b42a;\r\n    color: #fff;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    transition: background 0.3s;\r\n}\r\n.lcic-download-btn:hover {\r\n    background: #009a23;\r\n}\r\n<\/style>\r\n\r\n<script>\r\nlet lcicCompressedUrl = '';\r\nlet lcicOriginalImageUrl = '';\r\nlet lcicOriginalImgObj = null; \r\nconst lcicFastWidth = 500;\r\n\r\nconst tabBtns = document.querySelectorAll('.lcic-tab-btn');\r\nconst tabContents = document.querySelectorAll('.lcic-tab-content');\r\nconst uploadBtns = document.querySelectorAll('.lcic-upload-btn');\r\nconst fileInputs = document.querySelectorAll('.lcic-file-input');\r\nconst customWidthInput = document.getElementById('customWidth');\r\nconst customHeightInput = document.getElementById('customHeight');\r\nconst sizeTip = document.getElementById('sizeTip');\r\nconst lcicPreviewBox = document.getElementById('lcicPreviewBox');\r\nconst lcicOriginalImg = document.getElementById('lcicOriginalImg');\r\nconst lcicCompressedImg = document.getElementById('lcicCompressedImg');\r\nconst lcicDownloadBtn = document.getElementById('lcicDownloadBtn');\r\n\r\n\r\ntabBtns.forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n        tabBtns.forEach(b => b.classList.remove('active'));\r\n        btn.classList.add('active');\r\n        const tabId = btn.getAttribute('data-tab');\r\n        tabContents.forEach(content => {\r\n            content.classList.remove('active');\r\n        });\r\n        document.getElementById(`${tabId}Tab`).classList.add('active');\r\n        resetPreview();\r\n        sizeTip.textContent = '';\r\n    });\r\n});\r\n\r\n\r\nuploadBtns.forEach((btn, index) => {\r\n    btn.addEventListener('click', () => {\r\n        fileInputs[index].click();\r\n    });\r\n});\r\n\r\nfileInputs.forEach((input, index) => {\r\n    input.addEventListener('change', (e) => {\r\n        const file = e.target.files[0];\r\n        if (!file || !file.type.startsWith('image\/')) return;\r\n        const reader = new FileReader();\r\n        reader.onload = (event) => {\r\n            lcicOriginalImageUrl = event.target.result;\r\n            \r\n            \r\n            const img = new Image();\r\n            img.onload = function() {\r\n                lcicOriginalImgObj = img;\r\n                lcicOriginalImg.src = lcicOriginalImageUrl;\r\n                lcicPreviewBox.style.display = 'flex';\r\n                \r\n                const activeTab = document.querySelector('.lcic-tab-btn.active').getAttribute('data-tab');\r\n                if (activeTab === 'fast') {\r\n                    compressImage(lcicFastWidth, null);\r\n                } else {\r\n                    lcicCompressedImg.src = '';\r\n                    lcicDownloadBtn.style.display = 'none';\r\n                }\r\n            };\r\n            img.src = lcicOriginalImageUrl;\r\n        };\r\n        reader.readAsDataURL(file);\r\n    });\r\n});\r\n\r\n\r\ncustomWidthInput.addEventListener('input', function() {\r\n    if (this.value) customHeightInput.value = '';\r\n    handleCustomCompress();\r\n});\r\n\r\n\r\ncustomHeightInput.addEventListener('input', function() {\r\n    if (this.value) customWidthInput.value = '';\r\n    handleCustomCompress();\r\n});\r\n\r\n\r\nfunction handleCustomCompress() {\r\n    if (!lcicOriginalImageUrl || !lcicOriginalImgObj) return;\r\n    \r\n    const width = parseInt(customWidthInput.value) || 0;\r\n    const height = parseInt(customHeightInput.value) || 0;\r\n\r\n    if (!validateSize(width, height)) return;\r\n\r\n\r\n    if (width > 0) {\r\n        const scale = width \/ lcicOriginalImgObj.width;\r\n        const autoHeight = Math.round(lcicOriginalImgObj.height * scale);\r\n        compressImage(width, autoHeight);\r\n    } else if (height > 0) {\r\n        const scale = height \/ lcicOriginalImgObj.height;\r\n        const autoWidth = Math.round(lcicOriginalImgObj.width * scale);\r\n        compressImage(autoWidth, height);\r\n    }\r\n}\r\n\r\n\r\nfunction validateSize(width, height) {\r\n    if (width > 0 && height > 0) {\r\n        sizeTip.textContent = '\u53ea\u80fd\u586b\u5199\u5bbd\u5ea6\u6216\u9ad8\u5ea6\u5176\u4e2d\u4e00\u4e2a\uff0c\u9632\u6b62\u56fe\u7247\u6bd4\u4f8b\u53d8\u5f62\uff01';\r\n        return false;\r\n    }\r\n    if (width === 0 && height === 0) {\r\n        sizeTip.textContent = '\u8bf7\u586b\u5199\u5bbd\u5ea6\u6216\u9ad8\u5ea6';\r\n        return false;\r\n    }\r\n    sizeTip.textContent = '';\r\n    return true;\r\n}\r\n\r\n\r\nfunction compressImage(targetWidth, targetHeight) {\r\n    const canvas = document.createElement('canvas');\r\n    canvas.width = targetWidth;\r\n    canvas.height = targetHeight;\r\n    const ctx = canvas.getContext('2d');\r\n    ctx.drawImage(lcicOriginalImgObj, 0, 0, targetWidth, targetHeight);\r\n    \r\n    lcicCompressedUrl = canvas.toDataURL('image\/png', 1.0);\r\n    lcicCompressedImg.src = lcicCompressedUrl;\r\n    lcicDownloadBtn.style.display = 'block';\r\n}\r\n\r\n\r\nlcicDownloadBtn.addEventListener('click', () => {\r\n    if (!lcicCompressedUrl) return;\r\n    const a = document.createElement('a');\r\n    a.download = `compressed-${new Date().getTime()}.png`;\r\n    a.href = lcicCompressedUrl;\r\n    a.click();\r\n});\r\n\r\n\r\nfunction resetPreview() {\r\n    lcicCompressedUrl = '';\r\n    lcicOriginalImageUrl = '';\r\n    lcicOriginalImgObj = null;\r\n    lcicOriginalImg.src = '';\r\n    lcicCompressedImg.src = '';\r\n    lcicPreviewBox.style.display = 'none';\r\n    lcicDownloadBtn.style.display = 'none';\r\n    fileInputs.forEach(input => input.value = '');\r\n    customWidthInput.value = '';\r\n    customHeightInput.value = '';\r\n    sizeTip.textContent = '';\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u56fe\u7247\u4e00\u952e\u538b\u7f29 \u5feb\u901f\u538b\u7f29 \u81ea\u5b9a\u4e49\u5c3a\u5bf8\u538b\u7f29 \u9009\u62e9\u672c\u5730\u56fe\u7247 \u56fa\u5b9a\u5bbd\u5ea6500px\uff0c\u9ad8\u5ea6\u81ea\u9002\u5e94 | \u652f\u6301JPG\/PNG\/WebP \u9009\u62e9\u672c\u5730\u56fe\u7247 \u4ec5\u9700\u586b\u5199\u5bbd\u5ea6\u6216\u9ad8\u5ea6\uff0c\u81ea\u52a8\u7b49\u6bd4\u4f8b\u538b\u7f29 | \u652f\u6301JPG\/PNG\/WebP \u5bbd\u5ea6(px)\uff1a \u9ad8\u5ea6(px)\uff1a \u539f\u59cb<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":19,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-181","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":50,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/181\/revisions"}],"predecessor-version":[{"id":928,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/181\/revisions\/928"}],"up":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/19"}],"wp:attachment":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}