{"id":1067,"date":"2026-04-09T13:48:23","date_gmt":"2026-04-09T05:48:23","guid":{"rendered":"http:\/\/47.100.88.125\/?page_id=1067"},"modified":"2026-04-09T15:32:27","modified_gmt":"2026-04-09T07:32:27","slug":"%e5%9b%be%e7%89%87%e5%8f%96%e8%89%b2%e5%99%a8","status":"publish","type":"page","link":"https:\/\/www.05621997.xyz\/index.php\/tools\/%e5%9b%be%e7%89%87%e5%8f%96%e8%89%b2%e5%99%a8\/","title":{"rendered":"\u56fe\u7247\u53d6\u8272\u5668"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1067\" class=\"elementor elementor-1067\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04fca1b e-con-full e-flex e-con e-parent\" data-id=\"04fca1b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56996ee elementor-widget elementor-widget-heading\" data-id=\"56996ee\" 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\u53d6\u8272\u5668<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-436349b e-con-full e-flex e-con e-parent\" data-id=\"436349b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d08db45 elementor-widget elementor-widget-html\" data-id=\"d08db45\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div class=\"img_picker_main_container\">\r\n    <div class=\"img_picker_flex_wrapper\">\r\n        <div class=\"img_picker_left_section\">\r\n            <label class=\"img_picker_upload_btn\">\r\n                <input type=\"file\" id=\"img_picker_file_input\" accept=\"image\/*\">\r\n                \u4e0a\u4f20\u672c\u5730\u56fe\u7247\r\n            <\/label>\r\n            <canvas id=\"img_picker_canvas\" class=\"img_picker_canvas_area\"><\/canvas>\r\n        <\/div>\r\n\r\n        <div class=\"img_picker_right_section\">\r\n            <div class=\"img_picker_color_card\">\r\n                <div id=\"img_picker_color_preview\" class=\"img_picker_color_block\"><\/div>\r\n                \r\n                <div class=\"img_picker_color_item\">\r\n                    <span class=\"img_picker_label\">\u5341\u516d\u8fdb\u5236\uff1a<\/span>\r\n                    <input type=\"text\" id=\"img_picker_hex_value\" class=\"img_picker_color_input\" readonly value=\"#FFFFFF\">\r\n                    <button class=\"img_picker_copy_btn\" data-target=\"hex\">\u590d\u5236<\/button>\r\n                <\/div>\r\n\r\n                <div class=\"img_picker_color_item\">\r\n                    <span class=\"img_picker_label\">RGB\uff1a<\/span>\r\n                    <input type=\"text\" id=\"img_picker_rgb_value\" class=\"img_picker_color_input\" readonly value=\"(255,255,255)\">\r\n                    <button class=\"img_picker_copy_btn\" data-target=\"rgb\">\u590d\u5236<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n}\r\n\r\n.img_picker_main_container {\r\n    max-width: 900px;\r\n    width: 100%;\r\n    margin: 0 auto;\r\n    padding: 20px;\r\n}\r\n\r\n.img_picker_flex_wrapper {\r\n    display: flex;\r\n    gap: 30px;\r\n    width: 100%;\r\n}\r\n\r\n.img_picker_left_section {\r\n    flex: 2;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n}\r\n\r\n.img_picker_right_section {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.img_picker_upload_btn {\r\n    display: inline-block;\r\n    padding: 12px 24px;\r\n    background: #409eff;\r\n    color: #fff;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    text-align: center;\r\n    transition: background 0.3s;\r\n}\r\n.img_picker_upload_btn:hover {\r\n    background: #337ecc;\r\n}\r\n#img_picker_file_input {\r\n    display: none;\r\n}\r\n\r\n.img_picker_canvas_area {\r\n    width: 100%;\r\n    max-height: 500px;\r\n    border: 2px dashed #e5e7eb;\r\n    border-radius: 8px;\r\n    cursor: crosshair;\r\n    object-fit: contain;\r\n    background: #f9fafb;\r\n}\r\n\r\n.img_picker_color_card {\r\n    width: 100%;\r\n    padding: 30px 25px;\r\n    background: #ffffff;\r\n    border-radius: 12px;\r\n    box-shadow: 0 2px 12px rgba(0,0,0,0.08);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n}\r\n\r\n.img_picker_color_block {\r\n    width: 100%;\r\n    height: 120px;\r\n    border-radius: 8px;\r\n    background: #ffffff;\r\n    border: 1px solid #e5e7eb;\r\n}\r\n\r\n.img_picker_color_item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n.img_picker_label {\r\n    min-width: 70px;\r\n    font-size: 14px;\r\n    color: #333;\r\n    font-weight: 500;\r\n}\r\n.img_picker_color_input {\r\n    flex: 1;\r\n    padding: 8px 12px;\r\n    border: 1px solid #e5e7eb;\r\n    border-radius: 6px;\r\n    font-size: 14px;\r\n    background: #f9fafb;\r\n}\r\n\r\n.img_picker_copy_btn {\r\n    padding: 8px 12px;\r\n    background: #67c23a;\r\n    color: #fff;\r\n    border: none;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    transition: background 0.3s;\r\n    font-size: 12px;\r\n}\r\n.img_picker_copy_btn:hover {\r\n    background: #529b2e;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .img_picker_flex_wrapper {\r\n        flex-direction: column;\r\n        gap: 20px;\r\n    }\r\n    .img_picker_color_card {\r\n        padding: 20px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const fileInput = document.getElementById('img_picker_file_input');\r\n    const canvas = document.getElementById('img_picker_canvas');\r\n    const ctx = canvas.getContext('2d');\r\n    const hexInput = document.getElementById('img_picker_hex_value');\r\n    const rgbInput = document.getElementById('img_picker_rgb_value');\r\n    const colorBlock = document.getElementById('img_picker_color_preview');\r\n    const copyBtns = document.querySelectorAll('.img_picker_copy_btn');\r\n\r\n    let img = null;\r\n\r\n    \r\n    fileInput.addEventListener('change', function(e) {\r\n        const file = e.target.files[0];\r\n        if (!file) return;\r\n        \r\n        const reader = new FileReader();\r\n        reader.onload = function(event) {\r\n            img = new Image();\r\n            img.onload = function() {\r\n                const maxWidth = canvas.parentElement.clientWidth;\r\n                const maxHeight = 500;\r\n                let width = img.width;\r\n                let height = img.height;\r\n\r\n                if (width > maxWidth) {\r\n                    height = (maxWidth \/ width) * height;\r\n                    width = maxWidth;\r\n                }\r\n                if (height > maxHeight) {\r\n                    width = (maxHeight \/ height) * width;\r\n                    height = maxHeight;\r\n                }\r\n\r\n                canvas.width = width;\r\n                canvas.height = height;\r\n                ctx.drawImage(img, 0, 0, width, height);\r\n            };\r\n            img.src = event.target.result;\r\n        };\r\n        reader.readAsDataURL(file);\r\n    });\r\n\r\n    \r\n    canvas.addEventListener('click', function(e) {\r\n        if (!img) return;\r\n        \r\n        const rect = canvas.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n        \r\n        const pixel = ctx.getImageData(x, y, 1, 1).data;\r\n        const r = pixel[0];\r\n        const g = pixel[1];\r\n        const b = pixel[2];\r\n        \r\n        const hex = rgbToHex(r, g, b);\r\n        const rgb = `(${r},${g},${b})`;\r\n        \r\n        hexInput.value = hex;\r\n        rgbInput.value = rgb;\r\n        colorBlock.style.background = hex;\r\n    });\r\n\r\n    \r\n    copyBtns.forEach(btn => {\r\n        btn.addEventListener('click', function() {\r\n            const target = this.dataset.target;\r\n            const copyText = target === 'hex' ? hexInput.value : rgbInput.value;\r\n            \r\n            const tempInput = document.createElement('textarea');\r\n            tempInput.value = copyText;\r\n            tempInput.style.position = 'absolute';\r\n            tempInput.style.left = '-9999px';\r\n            document.body.appendChild(tempInput);\r\n            tempInput.select();\r\n            document.execCommand('copy');\r\n            document.body.removeChild(tempInput);\r\n        });\r\n    });\r\n\r\n    \r\n    function rgbToHex(r, g, b) {\r\n        return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\r\n    }\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\u53d6\u8272\u5668 \u4e0a\u4f20\u672c\u5730\u56fe\u7247 \u5341\u516d\u8fdb\u5236\uff1a \u590d\u5236 RGB\uff1a \u590d\u5236<\/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-1067","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1067","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=1067"}],"version-history":[{"count":19,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1067\/revisions"}],"predecessor-version":[{"id":1120,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1067\/revisions\/1120"}],"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=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}