{"id":209,"date":"2026-03-30T16:23:09","date_gmt":"2026-03-30T08:23:09","guid":{"rendered":"http:\/\/47.100.88.125\/?page_id=209"},"modified":"2026-04-08T13:52:14","modified_gmt":"2026-04-08T05:52:14","slug":"%e5%9b%be%e7%89%87%e6%a0%bc%e5%bc%8f%e8%bd%ac%e6%8d%a2","status":"publish","type":"page","link":"https:\/\/www.05621997.xyz\/index.php\/tools\/%e5%9b%be%e7%89%87%e6%a0%bc%e5%bc%8f%e8%bd%ac%e6%8d%a2\/","title":{"rendered":"\u56fe\u7247\u683c\u5f0f\u8f6c\u6362"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"209\" class=\"elementor elementor-209\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f66d23 e-con-full e-flex e-con e-parent\" data-id=\"3f66d23\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b970ec1 elementor-widget elementor-widget-heading\" data-id=\"b970ec1\" 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\u683c\u5f0f\u8f6c\u6362<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-84a56f6 e-con-full e-flex e-con e-parent\" data-id=\"84a56f6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e9721aa elementor-widget elementor-widget-html\" data-id=\"e9721aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div class=\"ptc-main-container\">\r\n    <!-- \u4e0a\u4f20\u533a\u57df -->\r\n    <div class=\"ptc-upload-area\">\r\n        <button class=\"ptc-upload-btn\" id=\"ptcUploadBtn\">\u9009\u62e9\u672c\u5730\u56fe\u7247<\/button>\r\n        <input type=\"file\" id=\"ptcFileInput\" accept=\"image\/*\" hidden>\r\n        <p class=\"ptc-tip\">\u652f\u6301 JPG \/ PNG \/ WebP \u683c\u5f0f\u4e92\u8f6c<\/p>\r\n    <\/div>\r\n\r\n\r\n    <div class=\"ptc-format-area\" id=\"ptcFormatArea\" style=\"display: none;\">\r\n        <label class=\"ptc-label\">\u8f6c\u6362\u4e3a\uff1a<\/label>\r\n        <select class=\"ptc-format-select\" id=\"ptcFormatSelect\">\r\n            <option value=\"image\/png\">PNG<\/option>\r\n            <option value=\"image\/jpeg\">JPG<\/option>\r\n            <option value=\"image\/webp\">WebP<\/option>\r\n        <\/select>\r\n    <\/div>\r\n\r\n\r\n    <div class=\"ptc-preview-area\" id=\"ptcPreviewArea\" style=\"display: none;\">\r\n        <div class=\"ptc-preview-item\">\r\n            <span class=\"ptc-preview-text\">\u539f\u59cb\u56fe\u7247<\/span>\r\n            <img id=\"ptcOriginalImg\" class=\"ptc-img-original\">\r\n        <\/div>\r\n        <div class=\"ptc-preview-item\">\r\n            <span class=\"ptc-preview-text\">\u8f6c\u6362\u540e\u56fe\u7247<\/span>\r\n            <img id=\"ptcConvertedImg\" class=\"ptc-img-convert\">\r\n        <\/div>\r\n    <\/div>\r\n\r\n\r\n    <button class=\"ptc-download-btn\" id=\"ptcDownloadBtn\" style=\"display: none;\">\u4e0b\u8f7d\u8f6c\u6362\u540e\u7684\u56fe\u7247<\/button>\r\n<\/div>\r\n\r\n<style>\r\n\r\n.ptc-page-title {\r\n    margin: 0 !important;\r\n    padding-top: 0 !important; \r\n    padding-bottom: 0 !important;\r\n    margin-bottom: 22px !important; \r\n    text-align: center;\r\n    font-size: 26px;\r\n    font-weight: 600;\r\n    color: #222;\r\n    line-height: 1.4;\r\n    width: 100%;\r\n    max-width: 600px;\r\n    margin-left: auto !important;\r\n    margin-right: auto !important;\r\n}\r\n\r\n\r\n.ptc-main-container {\r\n    width: 100%;\r\n    max-width: 600px;\r\n    margin: 0 auto 20px;\r\n    padding: 28px;\r\n    border: 1px solid #e8e8e8;\r\n    border-radius: 10px;\r\n    background: #ffffff;\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n.ptc-upload-area {\r\n    text-align: center;\r\n    margin-bottom: 20px;\r\n}\r\n.ptc-upload-btn {\r\n    padding: 12px 24px;\r\n    background: #3b82f6;\r\n    color: #fff;\r\n    border: none;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    font-size: 15px;\r\n    transition: all 0.3s ease;\r\n}\r\n.ptc-upload-btn:hover {\r\n    background: #2563eb;\r\n}\r\n.ptc-tip {\r\n    margin-top: 10px;\r\n    font-size: 13px;\r\n    color: #666;\r\n}\r\n\r\n\r\n.ptc-format-area {\r\n    text-align: center;\r\n    margin-bottom: 20px;\r\n}\r\n.ptc-format-select {\r\n    padding: 8px 12px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 6px;\r\n    font-size: 14px;\r\n    outline: none;\r\n    min-width: 120px;\r\n}\r\n\r\n\r\n.ptc-preview-area {\r\n    display: flex;\r\n    gap: 30px;\r\n    justify-content: center;\r\n    align-items: center;\r\n    margin: 25px 0;\r\n    padding: 20px;\r\n    border: 1px dashed #e0e0e0;\r\n    border-radius: 8px;\r\n}\r\n.ptc-preview-item {\r\n    text-align: center;\r\n}\r\n.ptc-preview-text {\r\n    display: block;\r\n    font-size: 14px;\r\n    color: #333;\r\n    margin-bottom: 10px;\r\n    font-weight: 500;\r\n}\r\n.ptc-img-original, .ptc-img-convert {\r\n    max-width: 160px;\r\n    max-height: 160px;\r\n    object-fit: contain;\r\n    border: 1px solid #f1f1f1;\r\n    border-radius: 4px;\r\n}\r\n\r\n\r\n.ptc-download-btn {\r\n    display: block;\r\n    width: 100%;\r\n    padding: 12px;\r\n    background: #10b981;\r\n    color: #fff;\r\n    border: none;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    font-size: 15px;\r\n    transition: all 0.3s ease;\r\n}\r\n.ptc-download-btn:hover {\r\n    background: #059669;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\r\nlet ptcOriginalFile = null;\r\nlet ptcConvertedUrl = '';\r\nconst ptcCanvas = document.createElement('canvas');\r\nconst ptcCtx = ptcCanvas.getContext('2d');\r\n\r\n\r\nconst ptcUploadBtn = document.getElementById('ptcUploadBtn');\r\nconst ptcFileInput = document.getElementById('ptcFileInput');\r\nconst ptcFormatArea = document.getElementById('ptcFormatArea');\r\nconst ptcFormatSelect = document.getElementById('ptcFormatSelect');\r\nconst ptcPreviewArea = document.getElementById('ptcPreviewArea');\r\nconst ptcOriginalImg = document.getElementById('ptcOriginalImg');\r\nconst ptcConvertedImg = document.getElementById('ptcConvertedImg');\r\nconst ptcDownloadBtn = document.getElementById('ptcDownloadBtn');\r\n\r\n\r\nptcUploadBtn.addEventListener('click', () => ptcFileInput.click());\r\n\r\n\r\nptcFileInput.addEventListener('change', (e) => {\r\n    const file = e.target.files[0];\r\n    if (!file || !file.type.startsWith('image\/')) return;\r\n    ptcOriginalFile = file;\r\n    const reader = new FileReader();\r\n    reader.onload = (e) => {\r\n        ptcOriginalImg.src = e.target.result;\r\n        ptcFormatArea.style.display = 'block';\r\n        ptcPreviewArea.style.display = 'flex';\r\n        convertImage(e.target.result); \r\n    };\r\n    reader.readAsDataURL(file);\r\n});\r\n\r\n\r\nptcFormatSelect.addEventListener('change', () => {\r\n    if (ptcOriginalImg.src) convertImage(ptcOriginalImg.src);\r\n});\r\n\r\n\r\nfunction convertImage(imgUrl) {\r\n    const img = new Image();\r\n    img.onload = () => {\r\n       \r\n        ptcCanvas.width = img.width;\r\n        ptcCanvas.height = img.height;\r\n        ptcCtx.clearRect(0, 0, ptcCanvas.width, ptcCanvas.height);\r\n        ptcCtx.drawImage(img, 0, 0);\r\n        \r\n        \r\n        const targetFormat = ptcFormatSelect.value;\r\n        ptcConvertedUrl = ptcCanvas.toDataURL(targetFormat, 0.9);\r\n        ptcConvertedImg.src = ptcConvertedUrl;\r\n        ptcDownloadBtn.style.display = 'block';\r\n    };\r\n    img.src = imgUrl;\r\n}\r\n\r\n\r\nptcDownloadBtn.addEventListener('click', () => {\r\n    if (!ptcConvertedUrl) return;\r\n    const ext = ptcFormatSelect.value.split('\/')[1];\r\n    const a = document.createElement('a');\r\n    a.download = `converted-${new Date().getTime()}.${ext}`;\r\n    a.href = ptcConvertedUrl;\r\n    a.click();\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\u683c\u5f0f\u8f6c\u6362 \u9009\u62e9\u672c\u5730\u56fe\u7247 \u652f\u6301 JPG \/ PNG \/ WebP \u683c\u5f0f\u4e92\u8f6c \u8f6c\u6362\u4e3a\uff1a PNGJPGWebP \u539f\u59cb\u56fe\u7247 \u8f6c\u6362\u540e\u56fe\u7247 \u4e0b\u8f7d\u8f6c\u6362\u540e\u7684\u56fe\u7247<\/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-209","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/209","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=209"}],"version-history":[{"count":10,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/209\/revisions"}],"predecessor-version":[{"id":648,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/209\/revisions\/648"}],"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=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}