{"id":241,"date":"2025-05-24T11:28:08","date_gmt":"2025-05-24T03:28:08","guid":{"rendered":"http:\/\/47.111.133.139\/?p=241"},"modified":"2026-06-20T14:46:52","modified_gmt":"2026-06-20T06:46:52","slug":"%e8%87%aa%e5%8a%a8%e8%8d%89%e7%a8%bf","status":"publish","type":"post","link":"https:\/\/yin.nnneri.me\/?p=241","title":{"rendered":"\u5728\u7ebf\u6296\u52a8\u5de5\u5177"},"content":{"rendered":"\n<style>\n    \/* ========== Dither \u5de5\u5177\u6837\u5f0f\uff08\u81ea\u9002\u5e94\u6df1\u6d45\u80cc\u666f\uff0c\u6e05\u6670\u53ef\u89c1\uff09 ========== *\/\n    #dither-app {\n        --color-primary: #165DFF;\n        --color-primary-hover: #4080FF;\n        --color-primary-active: #0E4BD9;\n        --color-danger: #F53F3F;\n\n        \/* \u6d45\u8272\u6a21\u5f0f\u53d8\u91cf\uff08\u52a0\u5f3a\u4e0d\u900f\u660e\u5ea6\u4e0e\u8fb9\u6846\uff09 *\/\n        --glass-bg: rgba(255, 255, 255, 0.85);       \/* \u63d0\u9ad8\u4e0d\u900f\u660e\u5ea6\uff0c\u786e\u4fdd\u767d\u8272\u5e95\u4e0a\u53ef\u89c1 *\/\n        --glass-bg-hover: rgba(255, 255, 255, 0.95);\n        --glass-border: rgba(0, 0, 0, 0.15);          \/* \u52a0\u6df1\u8fb9\u6846\uff0c\u8f6e\u5ed3\u66f4\u6e05\u6670 *\/\n        --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n        --glass-input-bg: rgba(0, 0, 0, 0.04);        \/* \u6781\u6d45\u7070\u8f93\u5165\u80cc\u666f\uff0c\u4e0e\u767d\u8272\u533a\u5206 *\/\n        --text-main: #1a1a1a;\n        --text-secondary: #4a4a4a;\n        --text-tertiary: #6a6a6a;\n\n        --radius-sm: 6px;\n        --radius-md: 10px;\n        --radius-lg: 14px;\n        --radius-xl: 18px;\n        --transition-fast: 0.15s ease;\n        --transition-normal: 0.25s ease;\n    }\n\n    \/* \u6df1\u8272\u6a21\u5f0f\uff08\u4fdd\u6301\u4e0d\u53d8\uff0c\u6548\u679c\u5f88\u68d2\uff09 *\/\n    @media (prefers-color-scheme: dark) {\n        #dither-app {\n            --glass-bg: rgba(255, 255, 255, 0.12);\n            --glass-bg-hover: rgba(255, 255, 255, 0.2);\n            --glass-border: rgba(255, 255, 255, 0.15);\n            --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n            --glass-input-bg: rgba(255, 255, 255, 0.08);\n            --text-main: #f0f0f0;\n            --text-secondary: #c0c0c0;\n            --text-tertiary: #a0a0a0;\n        }\n    }\n\n    \/* \u5168\u5c40\u91cd\u7f6e\uff08\u4ec5\u4f5c\u7528\u4e8e\u5de5\u5177\u5185\u90e8\uff09 *\/\n    #dither-app *,\n    #dither-app *::before,\n    #dither-app *::after {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n    }\n\n    #dither-app {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;\n        line-height: 1.6;\n        color: var(--text-main);\n    }\n\n    #dither-app .container {\n        max-width: 1100px;\n        margin: 0 auto;\n        padding: 20px 16px 40px;\n    }\n\n    #dither-app .main-grid {\n        display: flex;\n        flex-direction: column;\n        gap: 24px;\n    }\n\n    @media (min-width: 768px) {\n        #dither-app .main-grid {\n            flex-direction: row;\n            align-items: flex-start;\n        }\n        #dither-app .control-panel {\n            flex: 0 0 340px;\n            position: sticky;\n            top: 20px;\n        }\n        #dither-app .preview-panel {\n            flex: 1;\n            min-width: 0;\n        }\n    }\n\n    \/* \u73bb\u7483\u5361\u7247 *\/\n    #dither-app .panel-card {\n        background: var(--glass-bg);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        border: 1px solid var(--glass-border);\n        border-radius: var(--radius-xl);\n        padding: 20px 22px;\n        box-shadow: var(--glass-shadow);\n        transition: all var(--transition-normal);\n    }\n    #dither-app .panel-card:hover {\n        background: var(--glass-bg-hover);\n    }\n\n    #dither-app .form-label {\n        display: block;\n        font-size: 13px;\n        font-weight: 600;\n        color: var(--text-secondary);\n        margin-bottom: 6px;\n        letter-spacing: 0.01em;\n        text-transform: uppercase;\n    }\n\n    #dither-app .upload-zone {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: 130px;\n        border: 2px dashed var(--glass-border);\n        border-radius: var(--radius-lg);\n        cursor: pointer;\n        background: var(--glass-input-bg);\n        backdrop-filter: blur(4px);\n        -webkit-backdrop-filter: blur(4px);\n        transition: all var(--transition-normal);\n        text-align: center;\n        padding: 16px;\n    }\n    #dither-app .upload-zone:hover {\n        border-color: var(--color-primary);\n        background: rgba(22, 93, 255, 0.06);\n    }\n    #dither-app .upload-zone.drag-over {\n        border-color: var(--color-primary);\n        background: rgba(22, 93, 255, 0.12);\n        border-style: solid;\n    }\n    #dither-app .upload-icon {\n        font-size: 36px;\n        margin-bottom: 8px;\n        color: var(--text-tertiary);\n        transition: color var(--transition-fast);\n    }\n    #dither-app .upload-zone:hover .upload-icon {\n        color: var(--color-primary);\n    }\n    #dither-app .upload-text {\n        font-size: 14px;\n        font-weight: 600;\n        color: var(--text-secondary);\n        margin-bottom: 4px;\n    }\n    #dither-app .upload-hint {\n        font-size: 12px;\n        color: var(--text-tertiary);\n    }\n    #dither-app .file-name-display {\n        margin-top: 8px;\n        font-size: 13px;\n        color: var(--text-secondary);\n        text-align: center;\n        word-break: break-all;\n    }\n\n    #dither-app .form-group {\n        margin-bottom: 16px;\n    }\n    #dither-app .form-group:last-child {\n        margin-bottom: 0;\n    }\n    #dither-app .form-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n        margin-bottom: 6px;\n    }\n    #dither-app .form-row-label {\n        font-size: 13px;\n        font-weight: 500;\n        color: var(--text-secondary);\n        white-space: nowrap;\n    }\n    #dither-app .form-row-value {\n        font-size: 13px;\n        font-weight: 600;\n        color: var(--text-main);\n        min-width: 40px;\n        text-align: right;\n    }\n\n    \/* \u6ed1\u5757 *\/\n    #dither-app input[type=\"range\"] {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 100%;\n        height: 6px;\n        border-radius: 3px;\n        background: var(--glass-border);\n        outline: none;\n        cursor: pointer;\n        accent-color: var(--color-primary);\n    }\n    #dither-app input[type=\"range\"]::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        width: 18px;\n        height: 18px;\n        border-radius: 50%;\n        background: var(--color-primary);\n        border: 2px solid white;\n        box-shadow: 0 1px 4px rgba(0,0,0,0.15);\n        cursor: pointer;\n        transition: all var(--transition-fast);\n    }\n    #dither-app input[type=\"range\"]::-webkit-slider-thumb:hover {\n        background: var(--color-primary-hover);\n        transform: scale(1.1);\n    }\n    #dither-app input[type=\"range\"]::-moz-range-thumb {\n        width: 18px;\n        height: 18px;\n        border-radius: 50%;\n        background: var(--color-primary);\n        border: 2px solid white;\n        box-shadow: 0 1px 4px rgba(0,0,0,0.15);\n        cursor: pointer;\n    }\n\n    \/* \u590d\u9009\u6846 *\/\n    #dither-app .checkbox-row {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        font-size: 13px;\n        color: var(--text-secondary);\n        cursor: pointer;\n        padding: 4px 0;\n    }\n    #dither-app input[type=\"checkbox\"] {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 18px;\n        height: 18px;\n        border: 2px solid var(--glass-border);\n        border-radius: 4px;\n        cursor: pointer;\n        position: relative;\n        transition: all var(--transition-fast);\n        flex-shrink: 0;\n        background: var(--glass-input-bg);\n    }\n    #dither-app input[type=\"checkbox\"]:checked {\n        background: var(--color-primary);\n        border-color: var(--color-primary);\n    }\n    #dither-app input[type=\"checkbox\"]:checked::after {\n        content: '';\n        position: absolute;\n        left: 4px;\n        top: 1px;\n        width: 5px;\n        height: 9px;\n        border: solid white;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n    }\n    #dither-app input[type=\"checkbox\"]:hover {\n        border-color: var(--color-primary);\n    }\n\n    \/* \u6309\u94ae *\/\n    #dither-app .btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        padding: 10px 18px;\n        font-size: 14px;\n        font-weight: 600;\n        border: none;\n        border-radius: var(--radius-md);\n        cursor: pointer;\n        transition: all var(--transition-normal);\n        letter-spacing: 0.01em;\n        text-decoration: none;\n        white-space: nowrap;\n        user-select: none;\n    }\n    #dither-app .btn-primary {\n        background-color: var(--color-primary);\n        color: white;\n        box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);\n    }\n    #dither-app .btn-primary:hover {\n        background-color: var(--color-primary-hover);\n        box-shadow: 0 4px 12px rgba(22, 93, 255, 0.4);\n        transform: translateY(-1px);\n    }\n    #dither-app .btn-primary:active {\n        background-color: var(--color-primary-active);\n        transform: translateY(0);\n    }\n    #dither-app .btn-outline {\n        background: transparent;\n        color: var(--color-primary);\n        border: 2px solid var(--color-primary);\n        backdrop-filter: blur(8px);\n    }\n    #dither-app .btn-outline:hover {\n        background: rgba(22, 93, 255, 0.08);\n        transform: translateY(-1px);\n    }\n    #dither-app .btn-outline:active {\n        background: rgba(22, 93, 255, 0.15);\n        transform: translateY(0);\n    }\n\n    #dither-app .btn-row {\n        display: flex;\n        gap: 10px;\n        flex-wrap: wrap;\n        padding-top: 4px;\n    }\n\n    \/* \u9884\u89c8\u533a\u57df *\/\n    #dither-app .preview-container {\n        background: var(--glass-bg);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        border: 1px solid var(--glass-border);\n        border-radius: var(--radius-xl);\n        box-shadow: var(--glass-shadow);\n        overflow: hidden;\n        transition: all var(--transition-normal);\n        min-height: 300px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n    }\n    #dither-app .preview-container:hover {\n        background: var(--glass-bg-hover);\n    }\n    #dither-app .preview-placeholder {\n        color: var(--text-tertiary);\n        font-size: 15px;\n        text-align: center;\n        padding: 40px 20px;\n        pointer-events: none;\n    }\n    #dither-app .preview-placeholder .icon {\n        font-size: 48px;\n        display: block;\n        margin-bottom: 10px;\n        opacity: 0.5;\n    }\n    #dither-app #bitmap-canvas {\n        display: block;\n        max-width: 100%;\n        height: auto;\n        cursor: pointer;\n        image-rendering: pixelated;\n        transition: opacity var(--transition-normal);\n    }\n    #dither-app #bitmap-canvas.hidden {\n        display: none;\n    }\n\n    #dither-app .resolution-info {\n        font-size: 12px;\n        color: var(--text-tertiary);\n        text-align: center;\n        margin-top: 8px;\n        min-height: 18px;\n    }\n\n    #dither-app .divider {\n        border: none;\n        border-top: 1px solid var(--glass-border);\n        margin: 16px 0;\n    }\n\n    #dither-app .transition-bg {\n        transition: background-color 0.3s ease;\n    }\n    #dither-app .transition-all-300 {\n        transition: all 0.3s ease;\n    }\n\n    @media (max-width: 767px) {\n        #dither-app .container {\n            padding: 12px 10px 30px;\n        }\n        #dither-app .panel-card {\n            padding: 14px 16px;\n            border-radius: var(--radius-lg);\n        }\n        #dither-app .btn-row {\n            flex-direction: column;\n        }\n        #dither-app .btn-row .btn {\n            width: 100%;\n        }\n        #dither-app .upload-zone {\n            height: 100px;\n            padding: 10px;\n        }\n        #dither-app .upload-icon {\n            font-size: 28px;\n        }\n    }\n<\/style>\n<div id=\"dither-app\">\n    <div class=\"container\">\n        <div class=\"main-grid\">\n            <!-- \u5de6\u4fa7\u63a7\u5236\u9762\u677f -->\n            <div class=\"control-panel\">\n                <div class=\"panel-card\">\n                    <div id=\"dropimage-upload\" class=\"form-group\">\n                        <label class=\"form-label\">\u9009\u62e9\u56fe\u7247<\/label>\n                        <label for=\"file-upload\" class=\"upload-zone\" id=\"upload-label\">\n                            <span class=\"upload-icon\">&#128206;<\/span>\n                            <span class=\"upload-text\">\u70b9\u51fb\u4e0a\u4f20\u56fe\u7247<\/span>\n                            <span class=\"upload-hint\">\u6216\u62d6\u653e\u81f3\u6b64\u5904 \u00b7 PNG \/ JPG \/ WebP<\/span>\n                        <\/label>\n                        <input id=\"file-upload\" type=\"file\" accept=\"image\/*\" style=\"display:none;\" \/>\n                        <div id=\"file-name\" class=\"file-name-display\" style=\"display:none;\"><\/div>\n                    <\/div>\n\n                    <hr class=\"divider\">\n\n                    <div class=\"form-group\">\n                        <label class=\"form-label\">\u8f6c\u6362\u9009\u9879<\/label>\n\n                        <div class=\"form-group\">\n                            <div class=\"form-row\">\n                                <span class=\"form-row-label\">\u7f29\u653e\u6bd4\u4f8b<\/span>\n                                <span id=\"scale-value\" class=\"form-row-value\">100%<\/span>\n                            <\/div>\n                            <input type=\"range\" id=\"scale\" min=\"2\" max=\"100\" step=\"2\" value=\"100\">\n                        <\/div>\n\n                        <div class=\"form-group\">\n                            <div class=\"form-row\">\n                                <span class=\"form-row-label\">Bayer\u77e9\u9635\u5c3a\u5bf8<\/span>\n                                <span id=\"matrixsize-value\" class=\"form-row-value\">8\u00d78<\/span>\n                            <\/div>\n                            <input type=\"range\" id=\"matrix-size\" min=\"1\" max=\"5\" step=\"1\" value=\"3\">\n                        <\/div>\n\n                        <div class=\"form-group\">\n                            <div class=\"form-row\">\n                                <span class=\"form-row-label\">\u9608\u503c<\/span>\n                                <span id=\"threshold-value\" class=\"form-row-value\">128<\/span>\n                            <\/div>\n                            <input type=\"range\" id=\"threshold\" min=\"-256\" max=\"512\" value=\"128\">\n                        <\/div>\n\n                        <div class=\"form-group\">\n                            <div class=\"form-row\">\n                                <span class=\"form-row-label\">\u6743\u91cd<\/span>\n                                <span id=\"weight-value\" class=\"form-row-value\">1<\/span>\n                            <\/div>\n                            <input type=\"range\" id=\"weight\" min=\"0\" max=\"2\" value=\"1\" step=\"0.01\">\n                        <\/div>\n                    <\/div>\n\n                    <hr class=\"divider\">\n\n                    <div class=\"form-group\">\n                        <label class=\"form-label\">\u663e\u793a\u9009\u9879<\/label>\n                        <label class=\"checkbox-row\">\n                            <input type=\"checkbox\" id=\"color-checkbox\">\n                            <span>\u5f69\u8272\u8f93\u51fa<\/span>\n                        <\/label>\n                        <label class=\"checkbox-row\">\n                            <input type=\"checkbox\" id=\"precisionPreview-checkbox\" checked>\n                            <span>\u70b9\u5bf9\u70b9\u9884\u89c8<\/span>\n                        <\/label>\n                    <\/div>\n\n                    <div class=\"resolution-info\" id=\"images-resolution-value\"><\/div>\n                <\/div>\n\n                <div class=\"btn-row\" style=\"margin-top:16px;\">\n                    <button id=\"submit-button\" class=\"btn btn-primary\">\n                        &#128190; \u8f93\u51fa\u76ee\u6807\u5206\u8fa8\u7387PNG\n                    <\/button>\n                    <button id=\"submit-svg-button\" class=\"btn btn-outline\">\n                        &#128279; \u8f93\u51faSVG\u56fe\u50cf\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- \u53f3\u4fa7\u9884\u89c8\u9762\u677f -->\n            <div class=\"preview-panel\">\n                <div class=\"preview-container\" id=\"bitmap-container\">\n                    <canvas id=\"bitmap-canvas\" class=\"hidden\"><\/canvas>\n                    <div class=\"preview-placeholder\" id=\"preview-placeholder\">\n                        <span class=\"icon\">&#127912;<\/span>\n                        \u4e0a\u4f20\u56fe\u7247\u540e\u5728\u6b64\u5904\u9884\u89c8\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    var script = document.createElement('script');\n    script.src = 'https:\/\/yin.nnneri.me\/wp-content\/uploads\/2026\/06\/dither.js';\n    script.onload = function() {\n        if (typeof window.initDither === 'function') {\n            window.initDither();\n        }\n    };\n    document.head.appendChild(script);\n})();\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u9009\u62e9\u56fe\u7247 &#128206; \u70b9\u51fb\u4e0a\u4f20\u56fe\u7247 \u6216\u62d6\u653e\u81f3\u6b64\u5904 \u00b7 PNG \/ JPG \/ WebP \u8f6c\u6362\u9009\u9879 \u7f29\u653e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-241","post","type-post","status-publish","format-standard","hentry","category-tools"],"_links":{"self":[{"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/posts\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=241"}],"version-history":[{"count":40,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/posts\/241\/revisions"}],"predecessor-version":[{"id":661,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/posts\/241\/revisions\/661"}],"wp:attachment":[{"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}