\u795d\u798f\u8a5e\u62bd\u7c64\u5668 v3\uff08\u767d\u7070\uff0b\u7279\u8272\u98a8\u683c\uff5c\u55ae\u6a94 HTML\uff09<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;600;700;900&family=Noto+Serif+TC:wght@600;700&family=Zen+Maru+Gothic:wght@700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n \/* ===== \u4f5c\u7528\u57df\uff1a\u907f\u514d\u53d7\u5230 WP \u4e3b\u984c\u5e72\u64fe ===== *\/\r\n .bd-app{ --bg:#ffffff; --panel:#ffffff; --soft:#f1f5f9; --line:#d7dce6; --text:#0f172a; --muted:#64748b; --accent:#2563eb; }\r\n .bd-app *{ box-sizing:border-box }\r\n .bd-app{ color:var(--text); font-family:\"Noto Sans TC\",system-ui,Segoe UI,Roboto,Helvetica,Arial }\r\n\r\n .bd-wrap{ display:grid; grid-template-columns:360px 1fr; gap:20px; max-width:1280px; margin:0 auto; padding:16px }\r\n .bd-left{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; position:sticky; top:16px; height:calc(100dvh - 32px); overflow:auto; box-shadow:0 6px 24px rgba(2,6,23,.04) }\r\n .bd-right{ min-width:0 }\r\n .bd-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; margin-bottom:12px }\r\n .bd-app h1{ font-size:20px; margin:0 0 8px; font-weight:900 }\r\n .bd-app h3{ font-size:14px; margin:4px 0 6px; font-weight:800 }\r\n .bd-label{ font-size:12px; color:var(--muted); display:block; margin-bottom:4px }\r\n .bd-cols{ display:grid; grid-template-columns:1fr 1fr; gap:8px }\r\n .bd-input, .bd-select, .bd-textarea{ width:100%; background:#fff!important; color:var(--text)!important; border:1px solid var(--line)!important; border-radius:10px; font: 14px\/1.4 inherit; height:40px; padding:10px 42px 10px 12px; -webkit-padding-end:42px; white-space:nowrap; text-overflow:ellipsis; outline:none }\r\n .bd-textarea{ height:auto; min-height:90px; resize:vertical; padding:10px 12px }\r\n .bd-pill{ display:flex; flex-wrap:wrap; gap:8px }\r\n .bd-btn{ background:#fff; border:1px solid var(--line); color:var(--text); padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:800 }\r\n .bd-btn.ok{ background:#2563eb !important; color:#fff !important; border-color:#1d4ed8 !important }\r\n .bd-btn.ghost{ background:#f8fafc }\r\n .bd-stat{ font-size:12px; color:var(--muted) }\r\n .bd-preview{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px }\r\n .bd-canvas{ background:#fff; border-radius:12px; border:1px solid var(--line); max-width:100%; width:100%; height:auto; display:block }\r\n .bd-range{ width:100% }\r\n .bd-note{ font-size:12px; color:var(--muted); margin-top:6px }\r\n @media (max-width:1000px){ .bd-wrap{ grid-template-columns:1fr } .bd-left{ position:static; height:auto } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"bd-app\">\r\n <div class=\"bd-wrap\">\r\n <aside class=\"bd-left\">\r\n <h1>\u795d\u798f\u8a5e\u62bd\u7c64\u5668\uff08\u5c0f\u904a\u6232\uff09<\/h1>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <div class=\"bd-cols\">\r\n <div>\r\n <label class=\"bd-label\">\u5c3a\u5bf8<\/label>\r\n <select id=\"sizeSel\" class=\"bd-select\">\r\n <option value=\"1080x1080\">1:1\uff081080\u00d71080\uff09<\/option>\r\n <option value=\"1080x1920\">9:16\uff081080\u00d71920\uff09<\/option>\r\n <option value=\"1920x1080\">16:9\uff081920\u00d71080\uff09<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u5b57\u9ad4<\/label>\r\n <select id=\"fontSel\" class=\"bd-select\">\r\n <option value=\"Noto Sans TC\">Noto Sans TC<\/option>\r\n <option value=\"Noto Serif TC\">Noto Serif TC<\/option>\r\n <option value=\"Zen Maru Gothic\">Zen Maru Gothic<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bd-cols\" style=\"margin-top:8px\">\r\n <div>\r\n <label class=\"bd-label\">\u4e3b\u984c\u98a8\u683c\uff08\u5e95\u8272\uff09<\/label>\r\n <select id=\"themeSel\" class=\"bd-select\">\r\n <option value=\"dawn\" selected>Dawn \u6696\u6668\uff08\u4eae\uff09<\/option>\r\n <option value=\"grace\">Grace \u67d4\u5149<\/option>\r\n <option value=\"sky\">Sky \u9ad8\u7a7a<\/option>\r\n <option value=\"peach\">Peach \u871c\u6843<\/option>\r\n <option value=\"mint\">Mint \u8584\u8377<\/option>\r\n <option value=\"ocean\">Ocean \u975c\u6d77<\/option>\r\n <option value=\"rose\">Rose \u73ab\u7470<\/option>\r\n <option value=\"lavender\">Lavender \u85b0\u8863<\/option>\r\n <option value=\"amber\">Amber \u7425\u73c0<\/option>\r\n <option value=\"emerald\">Emerald \u7fe1\u7fe0<\/option>\r\n <option value=\"indigo\">Indigo \u975b\u85cd<\/option>\r\n <option value=\"slate\">Slate \u5ca9\u9801<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u6c34\u5370\uff08\u53ef\u7559\u7a7a\uff09<\/label>\r\n <input id=\"wmInput\" class=\"bd-input\" type=\"text\" placeholder=\"\u4f8b\uff1a\u5bf6\u8c9d\u7684\u9748\u7ce7\u5c4b\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <h3>\u4e0a\u50b3\u80cc\u666f\u5716<\/h3>\r\n <div class=\"bd-cols\">\r\n <div>\r\n <label class=\"bd-label\">\u6311\u9078\u5716\u7247<\/label>\r\n <input id=\"bgFile\" type=\"file\" class=\"bd-input\" accept=\"image\/*\" \/>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u9069\u61c9\u65b9\u5f0f<\/label>\r\n <select id=\"bgFit\" class=\"bd-select\">\r\n <option value=\"cover\" selected>\u92ea\u6eff\uff08cover\uff09<\/option>\r\n <option value=\"contain\">\u7f6e\u5165\uff08contain\uff09<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bd-cols\" style=\"margin-top:8px\">\r\n <div>\r\n <label class=\"bd-label\">\u80cc\u666f\u6a21\u7cca\uff08px\uff09<\/label>\r\n <input id=\"bgBlurVal\" class=\"bd-range\" type=\"range\" min=\"0\" max=\"30\" step=\"1\" value=\"0\" \/>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u6697\u5316\uff08%\uff09<\/label>\r\n <input id=\"bgDimVal\" class=\"bd-range\" type=\"range\" min=\"0\" max=\"70\" step=\"1\" value=\"0\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bd-pill\" style=\"margin-top:8px\">\r\n <button class=\"bd-btn\" id=\"clearBg\">\ud83e\uddfd \u6e05\u9664\u80cc\u666f<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <div class=\"bd-cols\">\r\n <div>\r\n <label class=\"bd-label\">\u80cc\u666f\u7d0b\u7406<\/label>\r\n <select id=\"overlaySel\" class=\"bd-select\">\r\n <option value=\"none\" selected>\u6975\u7c21\uff08\u7121\uff09<\/option>\r\n <option value=\"soft\">\u67d4\u5149<\/option>\r\n <option value=\"glass\">\u73bb\u7483\u5361\u7247<\/option>\r\n <option value=\"glow\">\u5149\u6688<\/option>\r\n <option value=\"grain\">\u7d30\u5fae\u9846\u7c92<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u6587\u5b57\u984f\u8272<\/label>\r\n <select id=\"textColorSel\" class=\"bd-select\">\r\n <option value=\"auto\" selected>\u81ea\u52d5\uff08\u4f9d\u80cc\u666f\u4eae\u5ea6\uff09<\/option>\r\n <option value=\"dark\">\u6df1\u8272<\/option>\r\n <option value=\"light\">\u6dfa\u8272<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bd-cols\" style=\"margin-top:8px\">\r\n <div>\r\n <label class=\"bd-label\">\u7279\u8272\u98a8\u683c\uff08\u66f4\u6709\u8fa8\u8b58\u5ea6\uff09<\/label>\r\n <select id=\"styleSel\" class=\"bd-select\">\r\n <option value=\"none\" selected>\u7121\uff08\u4fdd\u6301\u7c21\u7d04\uff09<\/option>\r\n <option value=\"sunburst\">Sunburst \u66dc\u5149\u653e\u5c04<\/option>\r\n <option value=\"blobs\">Blobs \u6f38\u5c64\u58a8\u6591<\/option>\r\n <option value=\"memphis\">Memphis \u5e7e\u4f55\u62fc\u8cbc<\/option>\r\n <option value=\"waves2\">Waves \u5c64\u758a\u6d41\u7dda<\/option>\r\n <option value=\"lowpoly\">Low-poly \u5e7e\u4f55\u9762<\/option>\r\n <option value=\"rings\">Rings \u540c\u5fc3\u5713<\/option>\r\n <option value=\"halftone\">Halftone \u7db2\u9ede\u6f38\u8b8a<\/option>\r\n <option value=\"gridwarp\">Grid-warp \u900f\u8996\u683c<\/option>\r\n <option value=\"confetti\">Confetti \u7d19\u5c51<\/option>\r\n <option value=\"brush\">Brush \u7b46\u5237<\/option>\r\n <option value=\"chevron\">Chevron \u4eba\u5b57\u7d0b<\/option>\r\n <option value=\"checker\">Checker \u68cb\u76e4\u6de1\u683c<\/option>\r\n <option value=\"rainbow\">Spectrum \u5f69\u8679\u5149\u8b5c<\/option>\r\n <option value=\"papertop\">Paper Tear \u6495\u7d19\u908a<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u98a8\u683c\u5f37\u5ea6<\/label>\r\n <select id=\"intensitySel\" class=\"bd-select\">\r\n <option value=\"subtle\">\u6de1<\/option>\r\n <option value=\"normal\" selected>\u4e2d<\/option>\r\n <option value=\"vivid\">\u5f37<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bd-pill\" style=\"margin-top:8px\">\r\n <label style=\"display:flex;align-items:center;gap:8px\"><input id=\"noRepeat\" type=\"checkbox\" checked>\u907f\u514d\u91cd\u8986\u62bd\u53d6<\/label>\r\n <label style=\"display:flex;align-items:center;gap:8px\"><input id=\"autoNewBg\" type=\"checkbox\" checked>\u6bcf\u6b21\u62bd\u63db\u80cc\u666f<\/label>\r\n <\/div>\r\n <div class=\"bd-pill\" style=\"margin-top:8px\">\r\n <button class=\"bd-btn ok\" id=\"drawBtn\">\ud83c\udfb2 \u62bd\u4e00\u689d<\/button>\r\n <button class=\"bd-btn\" id=\"redrawBtn\">\u267b\ufe0f \u91cd\u7e6a<\/button>\r\n <button class=\"bd-btn ghost\" id=\"resetPoolBtn\">\ud83e\uddf9 \u91cd\u7f6e\u6c60<\/button>\r\n <div class=\"bd-stat\" id=\"statInfo\" style=\"margin-left:auto\">\u5df2\u62bd 0 \/ 0<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <div class=\"bd-pill\">\r\n <button class=\"bd-btn\" id=\"dlBtn\">\u2b07\ufe0f \u4e0b\u8f09 PNG<\/button>\r\n <button class=\"bd-btn\" id=\"dlAllBtn\">\u2b07\ufe0f \u4e00\u9375\u4e09\u5c3a\u5bf8<\/button>\r\n <button class=\"bd-btn\" id=\"shareBtn\">\ud83d\udce4 \u5206\u4eab\uff08\u884c\u52d5\u88dd\u7f6e\uff09<\/button>\r\n <\/div>\r\n <div class=\"bd-stat\">\u63d0\u793a\uff1a\u652f\u63f4 <code>navigator.share<\/code> \u7684\u624b\u6a5f\u53ef\u76f4\u63a5\u5206\u4eab\u5716\u7247\uff1b\u5426\u5247\u6703\u89f8\u767c\u4e0b\u8f09\u3002<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <h3>\u4f86\u6e90<\/h3>\r\n <div class=\"bd-cols\">\r\n <div>\r\n <label class=\"bd-label\">\u4f7f\u7528\u54ea\u500b\u4f86\u6e90\uff1f<\/label>\r\n <select id=\"libSel\" class=\"bd-select\">\r\n <option value=\"builtin\" selected>\u5167\u5efa\u795d\u798f\u8a5e\uff08\u7d04 300\uff09<\/option>\r\n <option value=\"bible\">\u8056\u7d93\u91d1\u53e5\uff08\u7cbe\u9078\u4e3b\u984c\uff09<\/option>\r\n <option value=\"custom\">\u81ea\u8a02\u8a5e\u5eab\uff08\u5132\u5b58\u5728\u672c\u6a5f\uff09<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"bibleBox\">\r\n <label class=\"bd-label\">\u91d1\u53e5\u4e3b\u984c<\/label>\r\n <select id=\"verseTopicSel\" class=\"bd-select\">\r\n <option value=\"hope\">\u76fc\u671b<\/option>\r\n <option value=\"comfort\">\u5b89\u6170<\/option>\r\n <option value=\"healing\">\u91ab\u6cbb<\/option>\r\n <option value=\"peace\">\u5e73\u5b89<\/option>\r\n <option value=\"joy\">\u559c\u6a02<\/option>\r\n <option value=\"strength\">\u525b\u5f37<\/option>\r\n <option value=\"provision\">\u4f9b\u61c9<\/option>\r\n <option value=\"guidance\">\u5f15\u5c0e\uff0f\u9053\u8def<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div id=\"customBox\" style=\"display:none;margin-top:8px\">\r\n <label class=\"bd-label\">\u81ea\u8a02\u8a5e\u5eab\uff08\u6bcf\u884c\u4e00\u53e5\uff09<\/label>\r\n <textarea id=\"customArea\" class=\"bd-textarea\" placeholder=\"\u6bcf\u884c\u4e00\u689d\u795d\u798f\u8a5e\uff0c\u4f8b\u5982\uff1a \u9858\u4e3b\u7684\u5e73\u5b89\u8207\u4f60\u540c\u5728 \u9858\u4e3b\u8cdc\u4f60\u667a\u6167\u4f5c\u6bcf\u500b\u9078\u64c7 \u2026\"><\/textarea>\r\n <div class=\"bd-pill\" style=\"margin-top:6px\">\r\n <button class=\"bd-btn\" id=\"importSample\">\u532f\u5165\u793a\u4f8b 40 \u53e5<\/button>\r\n <button class=\"bd-btn ghost\" id=\"clearCustom\">\u6e05\u7a7a<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bd-stat\">\u72c0\u614b\uff1a<span id=\"libCount\">0<\/span> \u689d\u53ef\u7528<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <h3>\u7de8\u8f2f\u76ee\u524d\u53e5\u5b50<\/h3>\r\n <textarea id=\"editText\" class=\"bd-textarea\" placeholder=\"\u5728\u6b64\u76f4\u63a5\u4fee\u6539\u6587\u5b57\u2026\"><\/textarea>\r\n <div class=\"bd-pill\" style=\"margin-top:6px\">\r\n <button class=\"bd-btn ok\" id=\"applyNow\">\u5957\u7528\u5230\u756b\u9762<\/button>\r\n <button class=\"bd-btn\" id=\"revertText\">\u9084\u539f\u62bd\u5230\u7684\u53e5\u5b50<\/button>\r\n <button class=\"bd-btn\" id=\"saveToCustom\">\u5b58\u5230\u81ea\u8a02\u8a5e\u5eab<\/button>\r\n <\/div>\r\n <div class=\"bd-stat\">\u5b57\u6578\uff1a<span id=\"charCount\">0<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"bd-card\">\r\n <h3>\u6587\u5b57\u6392\u7248<\/h3>\r\n <div class=\"bd-cols\">\r\n <div>\r\n <label class=\"bd-label\">\u5b57\u7d1a\u6a21\u5f0f<\/label>\r\n <select id=\"fontModeSel\" class=\"bd-select\">\r\n <option value=\"auto\" selected>\u81ea\u52d5\uff08\u6700\u4f73\u5316\uff09<\/option>\r\n <option value=\"fixed\">\u56fa\u5b9a\uff08px\uff09<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u56fa\u5b9a\u5b57\u7d1a\uff08px\uff09<\/label>\r\n <input id=\"fixedPx\" class=\"bd-input\" type=\"number\" value=\"64\" min=\"12\" max=\"200\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bd-cols\" style=\"margin-top:8px\">\r\n <div>\r\n <label class=\"bd-label\">\u5c0d\u9f4a<\/label>\r\n <select id=\"alignSel\" class=\"bd-select\">\r\n <option value=\"center\" selected>\u7f6e\u4e2d<\/option>\r\n <option value=\"left\">\u9760\u5de6<\/option>\r\n <option value=\"right\">\u9760\u53f3<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u5b57\u8ddd\uff08px\uff09<\/label>\r\n <input id=\"lsInput\" class=\"bd-input\" type=\"number\" step=\"0.5\" value=\"0\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bd-cols\" style=\"margin-top:8px\">\r\n <div>\r\n <label class=\"bd-label\">\u884c\u9ad8\u500d\u7387<\/label>\r\n <input id=\"lhInput\" class=\"bd-input\" type=\"number\" step=\"0.05\" value=\"1.30\" \/>\r\n <\/div>\r\n <div><\/div>\r\n <\/div>\r\n <div class=\"bd-note\">\u63d0\u793a\uff1a\u8f38\u5165\u5167\u5982\u542b\u6709\u63db\u884c\uff08\u6bcf\u884c\u6309\u4e00\u6b21 Enter\uff09\uff0c\u5c07\u300c\u5b8c\u5168\u5c0a\u91cd\u300d\u4f60\u7684\u63db\u884c\uff1b\u7cfb\u7d71\u53ea\u6703\u81ea\u52d5\u7b49\u6bd4\u7e2e\u5c0f\u5b57\u7d1a\u8b93\u5167\u5bb9\u585e\u9032\u6846\u3002<\/div>\r\n <\/div>\r\n <\/aside>\r\n\r\n <main class=\"bd-right\">\r\n <div class=\"bd-preview\">\r\n <canvas id=\"cv\" class=\"bd-canvas\" width=\"1080\" height=\"1080\" aria-label=\"\u9810\u89bd\u756b\u5e03\"><\/canvas>\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ====== \u4fbf\u6377 ======\r\nconst $ = (id)=>document.getElementById(id);\r\nconst cv = $('cv');\r\nconst ctx = cv.getContext('2d');\r\n\r\nconst sizeSel=$('sizeSel'), fontSel=$('fontSel'), themeSel=$('themeSel'),\r\n overlaySel=$('overlaySel'), textColorSel=$('textColorSel'),\r\n styleSel=$('styleSel'), intensitySel=$('intensitySel'),\r\n wmInput=$('wmInput'),\r\n noRepeat=$('noRepeat'), autoNewBg=$('autoNewBg'),\r\n drawBtn=$('drawBtn'), redrawBtn=$('redrawBtn'), resetPoolBtn=$('resetPoolBtn'),\r\n dlBtn=$('dlBtn'), dlAllBtn=$('dlAllBtn'), shareBtn=$('shareBtn'),\r\n libSel=$('libSel'), customBox=$('customBox'), customArea=$('customArea'),\r\n importSample=$('importSample'), clearCustom=$('clearCustom'),\r\n libCount=$('libCount'), statInfo=$('statInfo'),\r\n editText=$('editText'), applyNow=$('applyNow'), revertText=$('revertText'), saveToCustom=$('saveToCustom'),\r\n charCount=$('charCount'),\r\n fontModeSel=$('fontModeSel'), fixedPxInput=$('fixedPx'), alignSel=$('alignSel'), lsInput=$('lsInput'), lhInput=$('lhInput');\r\n\r\nconst bgFile=$('bgFile'), bgFit=$('bgFit'), bgBlurVal=$('bgBlurVal'), bgDimVal=$('bgDimVal'), clearBg=$('clearBg');\r\nconst verseTopicSel=$('verseTopicSel'), bibleBox=$('bibleBox');\r\n\r\n\/\/ \u80cc\u666f\u5716\r\nlet userBG=null;\r\n\r\n\/\/ ====== \u8a5e\u5eab\uff1a\u795d\u798f\u8a5e\uff08300 \u53e5\uff09 ======\r\nvar fallbackPhrases=[\r\n '\u4e3b\u611b\u4f60\uff0c\u4eca\u5929\u4e5f\u8207\u4f60\u540c\u5728\u3002','\u628a\u91cd\u64d4\u4ea4\u7d66\u7942\uff0c\u4f60\u5fc5\u5f97\u5b89\u606f\u3002','\u9858\u5e73\u5b89\u5982\u6cb3\u6d41\u9032\u4f60\u5fc3\u3002','\u4f60\u88ab\u770b\u898b\uff0c\u4e5f\u88ab\u73cd\u60dc\u3002','\u5728\u5bb3\u6015\u6642\uff0c\u4e3b\u63e1\u8457\u4f60\u7684\u624b\u3002'\r\n];\r\nvar baseCurated=[\r\n '\u9858\u4e3b\u7684\u5e73\u5b89\u5982\u6cb3\u6d41\u6dcc\u5728\u4f60\u5fc3\u4e2d\u3002', '\u6c42\u4e3b\u4eca\u65e5\u4ee5\u559c\u6a02\u5145\u6eff\u4f60\u3002', '\u8edf\u5f31\u8655\uff0c\u4e3b\u6210\u70ba\u4f60\u525b\u5f37\u3002',\r\n '\u4e3b\u7684\u5149\u7167\u4eae\u4f60\u7684\u8173\u6b65\uff0c\u4e0d\u518d\u8ff7\u832b\u3002', '\u628a\u91cd\u64d4\u4ea4\u7d66\u7942\uff0c\u4f60\u5fc5\u5f97\u5b89\u606f\u3002', '\u9858\u4e3b\u8cdc\u4f60\u667a\u6167\u4f5c\u6bcf\u500b\u9078\u64c7\u3002',\r\n '\u4e3b\u662f\u4f60\u7684\u7267\u8005\uff0c\u4f60\u5fc5\u4e0d\u81f3\u7f3a\u4e4f\u3002', '\u4e3b\u7684\u8a71\u662f\u4f60\u8173\u524d\u7684\u71c8\u3001\u8def\u4e0a\u7684\u5149\u3002', '\u6069\u5178\u5920\u7528\uff0c\u80fd\u529b\u5728\u8edf\u5f31\u4e0a\u986f\u5f97\u5b8c\u5168\u3002',\r\n '\u5728\u4e3b\u88e1\uff0c\u4f60\u6c38\u4e0d\u5b64\u55ae\u3002','\u9858\u4f60\u5728\u5fd9\u788c\u4e2d\u4ecd\u80fd\u5b89\u975c\u5f97\u529b\u3002','\u4e3b\u770b\u9867\u4f60\u7684\u51fa\u4e5f\u770b\u9867\u4f60\u7684\u5165\u3002',\r\n '\u9858\u76fc\u671b\u5728\u4f60\u5fc3\u88e1\u518d\u6b21\u9ede\u71c3\u3002','\u4e3b\u89aa\u81ea\u70ba\u4f60\u9810\u5099\u6700\u5408\u9069\u7684\u6642\u9593\u3002','\u9858\u4f60\u5411\u4e0b\u624e\u6839\uff0c\u5411\u4e0a\u7d50\u679c\u3002',\r\n '\u9858\u4f60\u5728\u7b49\u5f85\u4e2d\u5b78\u6703\u5b89\u7a69\u8207\u4fe1\u9760\u3002','\u795e\u5fc5\u70ba\u4f60\u722d\u6230\uff0c\u4f60\u53ea\u8981\u975c\u9ed8\u3002','\u4e3b\u611b\u4f60\uff0c\u6c92\u6709\u6539\u8b8a\u3002',\r\n '\u9858\u4f60\u88ab\u8056\u9748\u7684\u559c\u6a02\u5145\u6eff\u3002','\u9858\u4f60\u7684\u5bb6\u5ead\u88ab\u611b\u8207\u5408\u4e00\u5145\u6eff\u3002'\r\n];\r\nfunction buildBuiltin300(base){\r\n const curated = Array.isArray(base)? base.slice(): [];\r\n const target = 300; const out = curated.slice();\r\n const P=['\u9858\u4e3b','\u6c42\u4e3b','\u9858\u4f60','\u4e3b\u5fc5'];\r\n const A=['\u4ee5\u5e73\u5b89\u74b0\u7e5e','\u8cdc\u4e0b\u667a\u6167\u8207\u52c7\u6c23','\u89aa\u81ea\u91ab\u6cbb','\u5f15\u5c0e\u6bcf\u4e00\u6b65','\u89aa\u81ea\u5b89\u6170','\u52a0\u6dfb\u529b\u91cf','\u958b\u65b0\u7684\u9053\u8def','\u4fdd\u5b88\u5fc3\u61f7\u610f\u5ff5','\u64e6\u53bb\u773c\u6dda','\u6210\u70ba\u4f60\u7684\u76fe\u724c','\u4f7f\u4f60\u624b\u4e2d\u6240\u4f5c\u76e1\u90fd\u9806\u5229','\u8cdc\u4f60\u8d85\u904e\u6240\u6c42\u6240\u60f3','\u5728\u9ed1\u591c\u9ede\u71c8','\u8b93\u4f60\u91cd\u65b0\u5f97\u529b','\u4f7f\u4f60\u5728\u7b49\u5f85\u4e2d\u4ecd\u559c\u6a02','\u8b93\u4f60\u770b\u898b\u81ea\u5df1\u7684\u5bf6\u8cb4','\u8b93\u4f60\u9047\u898b\u8a72\u9047\u898b\u7684\u4eba','\u727d\u8457\u4f60\u5f80\u524d\u8d70','\u5728\u4f60\u6240\u5230\u4e4b\u8655\u5e36\u4f86\u548c\u5e73','\u6210\u70ba\u4ed6\u4eba\u7684\u795d\u798f','\u4e0d\u518d\u88ab\u6050\u61fc\u7d81\u4f4f','\u628a\u64d4\u6182\u5316\u4f5c\u79b1\u544a','\u4ee5\u6069\u5178\u4ee3\u66ff\u6279\u8a55','\u4ee5\u76fc\u671b\u66ff\u63db\u5931\u671b','\u4ee5\u771f\u7406\u5805\u56fa','\u4fee\u76f4\u4f60\u524d\u9762\u7684\u8def','\u9810\u5099\u5408\u9069\u7684\u6642\u6a5f'];\r\n const T=['\u4f60','\u4f60\u5fc3','\u4f60\u7684\u4eca\u5929','\u4f60\u7684\u660e\u5929','\u4f60\u7684\u5bb6\u5ead','\u4f60\u7684\u9748\u88e1','\u4f60\u6240\u611b\u7684\u4eba','\u4f60\u7684\u8077\u5834','\u4f60\u7684\u670d\u4e8b','\u4f60\u7684\u5b78\u696d'];\r\n const S=['\u628a\u91cd\u64d4\u4ea4\u7d66\u7942','\u7576\u4f60\u611f\u5230\u8edf\u5f31\u6642','\u5728\u4f60\u5bb3\u6015\u7684\u6642\u5019','\u7576\u9053\u8def\u6a21\u7cca\u6642','\u5728\u5fd9\u4e82\u4e4b\u4e2d','\u5728\u591c\u88e1\u6d41\u6dda\u6642','\u7576\u4f60\u7b49\u5019\u7b54\u6848\u6642','\u5728\u9806\u5229\u4e4b\u65e5','\u5728\u53d7\u632b\u4e4b\u6642','\u7576\u4f60\u7368\u81ea\u4e00\u4eba\u6642'];\r\n const C=['\u7942\u5fc5\u4ee5\u529b\u91cf\u6276\u6301\u4f60','\u7942\u4ecd\u89aa\u81ea\u770b\u9867\u4f60','\u7942\u5fc5\u70ba\u4f60\u722d\u6230','\u7942\u8981\u7528\u5e73\u5b89\u5145\u6eff\u4f60','\u7942\u8981\u727d\u8457\u4f60\u524d\u884c','\u7942\u628a\u65b0\u6b4c\u653e\u5728\u4f60\u53e3\u4e2d','\u7942\u6703\u958b\u90a3\u8a72\u958b\u7684\u9580','\u7942\u7528\u7b11\u5bb9\u56de\u61c9\u4f60\u7684\u79b1\u544a','\u7942\u4f7f\u4f60\u91cd\u65b0\u5f97\u529b','\u7942\u6703\u8cdc\u4e0b\u5408\u5b9c\u7684\u5e6b\u52a9'];\r\n const gen=[];\r\n for(const p of P){ for(const a of A){ for(const t of T){ gen.push(`${p}${a}${t}\u3002`); } } }\r\n for(const a of A){ gen.push(`\u9858\u4e3b${a}\u3002`); }\r\n for(const s of S){ for(const c of C){ gen.push(`${s}\uff0c${c}\u3002`);} }\r\n const seen=new Set(out); gen.sort((a,b)=>a.length-b.length);\r\n for(const s of gen){ if(out.length>=target) break; if(!seen.has(s) && s.length<=28){ seen.add(s); out.push(s);} }\r\n for(const s of gen){ if(out.length>=target) break; if(!seen.has(s)){ seen.add(s); out.push(s);} }\r\n for(let i=out.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [out[i],out[j]]=[out[j],out[i]]; }\r\n return out.slice(0,target);\r\n}\r\nconst builtinPhrases = buildBuiltin300(baseCurated);\r\n\r\n\/\/ ====== \u8056\u7d93\u91d1\u53e5\uff08\u6309\u4e3b\u984c\uff09 ======\r\nconst verses = {\r\n hope: { list: [\r\n '\u300c\u4f60\u7684\u8a71\u662f\u6211\u8173\u524d\u7684\u71c8\uff0c\u662f\u6211\u8def\u4e0a\u7684\u5149\u3002\u300d\uff08\u8a69119:105\uff09',\r\n '\u300c\u9ed1\u591c\u96d6\u7136\u6709\u54ed\u6ce3\uff0c\u65e9\u6668\u4fbf\u5fc5\u6b61\u547c\u3002\u300d\uff08\u8a6930:5\uff09',\r\n '\u300c\u76fc\u671b\u4e0d\u81f3\u65bc\u7f9e\u6065\u3002\u300d\uff08\u7f855:5\uff09'\r\n ]},\r\n comfort: { list: [\r\n '\u300c\u4e3b\u89aa\u81ea\u5b89\u6170\u4f60\uff0c\u64e6\u53bb\u773c\u6dda\u3002\u300d\uff08\u555f21:4 \u6982\u610f\uff09',\r\n '\u300c\u7942\u9760\u8fd1\u50b7\u5fc3\u7684\u4eba\u3002\u300d\uff08\u8a6934:18 \u6982\u610f\uff09',\r\n '\u300c\u8cdc\u4e0b\u51fa\u4eba\u610f\u5916\u7684\u5e73\u5b89\u3002\u300d\uff08\u81534:7 \u6982\u610f\uff09'\r\n ]},\r\n healing: { list: [\r\n '\u300c\u6211\u662f\u91ab\u6cbb\u4f60\u7684\u8036\u548c\u83ef\u3002\u300d\uff08\u51fa15:26 \u6982\u610f\uff09',\r\n '\u300c\u4e3b\u91ab\u6cbb\u50b7\u5fc3\u7684\u4eba\uff0c\u88f9\u597d\u4ed6\u5011\u7684\u50b7\u8655\u3002\u300d\uff08\u8a69147:3 \u6982\u610f\uff09'\r\n ]},\r\n peace: { list: [\r\n '\u300c\u6211\u7559\u4e0b\u5e73\u5b89\u7d66\u4f60\u5011\u3002\u300d\uff08\u7d0414:27\uff09',\r\n '\u300c\u9858\u4e3b\u8cdc\u4f60\u5011\u5e38\u5e38\u5e73\u5b89\u3002\u300d\uff08\u5e16\u5f8c3:16\uff09'\r\n ]},\r\n joy: { list: [\r\n '\u300c\u4e3b\u7684\u559c\u6a02\u662f\u4f60\u5011\u7684\u529b\u91cf\u3002\u300d\uff08\u5c3c8:10\uff09',\r\n '\u300c\u4f60\u5011\u8981\u5e38\u5e38\u559c\u6a02\u3002\u300d\uff08\u5e16\u524d5:16\uff09'\r\n ]},\r\n strength: { list: [\r\n '\u300c\u6211\u9760\u8457\u90a3\u52a0\u7d66\u6211\u529b\u91cf\u7684\uff0c\u51e1\u4e8b\u90fd\u80fd\u505a\u3002\u300d\uff08\u81534:13\uff09',\r\n '\u300c\u8036\u548c\u83ef\u662f\u6211\u7684\u529b\u91cf\u3002\u300d\uff08\u8a6928:7 \u6982\u610f\uff09'\r\n ]},\r\n provision: { list: [\r\n '\u300c\u6211\u7684\u795e\u5fc5\u7167\u7942\u7684\u8c50\u5bcc\uff0c\u5728\u57fa\u7763\u88e1\uff0c\u4f7f\u4f60\u5011\u4e00\u5207\u6240\u9700\u7528\u7684\u90fd\u5145\u8db3\u3002\u300d\uff08\u81534:19\uff09',\r\n '\u300c\u8036\u548c\u83ef\u662f\u6211\u7684\u7267\u8005\uff0c\u6211\u5fc5\u4e0d\u81f3\u7f3a\u4e4f\u3002\u300d\uff08\u8a6923:1\uff09'\r\n ]},\r\n guidance: { list: [\r\n '\u300c\u7942\u5fc5\u6307\u6559\u4f60\u7576\u884c\u7684\u8def\u3002\u300d\uff08\u8a6932:8 \u6982\u610f\uff09',\r\n '\u300c\u5728\u4f60\u4e00\u5207\u6240\u884c\u7684\u4e8b\u4e0a\u90fd\u8981\u8a8d\u5b9a\u7942\uff0c\u7942\u5fc5\u6307\u5f15\u4f60\u7684\u8def\u3002\u300d\uff08\u7bb43:6\uff09'\r\n ]}\r\n};\r\nfunction getBibleList(topic){\r\n const t = verses[topic] || verses['hope'];\r\n return t.list.slice();\r\n}\r\n\r\n\/\/ LocalStorage for custom\r\nconst LS_CUSTOM='bless_drawer_custom_v3';\r\nfunction loadCustom(){ try{const raw=localStorage.getItem(LS_CUSTOM);return raw? JSON.parse(raw): [];}catch(e){return [];} }\r\nfunction saveCustom(list){ localStorage.setItem(LS_CUSTOM, JSON.stringify(list||[])); }\r\n\r\nlet customList = loadCustom();\r\nlet currentLib='builtin';\r\nlet pool=[]; let lastPhrase=''; let lastIdx=-1;\r\n\r\n\/\/ ====== \u80cc\u666f\u8207\u7e6a\u88fd ======\r\nfunction hsl(h,s,l){ return `hsl(${h} ${s}% ${l}%)`; }\r\nfunction pickThemeConf(name){\r\n const T={\r\n dawn:{type:'grad',colors:[[28,85,65],[44,90,62]],overlay:['soft']},\r\n grace:{type:'grad',colors:[[210,55,92],[230,55,86]],overlay:['soft']},\r\n sky:{type:'grad',colors:[[205,70,80],[220,70,68]],overlay:['soft']},\r\n peach:{type:'grad',colors:[[22,85,72],[8,70,64]],overlay:['soft']},\r\n mint:{type:'grad',colors:[[155,38,74],[165,40,62]],overlay:['soft']},\r\n ocean:{type:'grad',colors:[[205,60,70],[210,60,58]],overlay:['soft']},\r\n rose:{type:'grad',colors:[[350,65,72],[330,58,62]],overlay:['soft']},\r\n lavender:{type:'grad',colors:[[270,45,76],[280,48,64]],overlay:['soft']},\r\n amber:{type:'grad',colors:[[40,85,64],[28,75,54]],overlay:['soft']},\r\n emerald:{type:'grad',colors:[[150,45,58],[170,42,48]],overlay:['soft']},\r\n indigo:{type:'grad',colors:[[240,40,58],[260,40,48]],overlay:['soft']},\r\n slate:{type:'grad',colors:[[220,20,98],[220,20,92]],overlay:['soft']}\r\n }; return T[name]||T['dawn'];\r\n}\r\nfunction roundRect(ctx,x,y,w,h,r){ r=r||12; ctx.beginPath(); ctx.moveTo(x+r,y); ctx.arcTo(x+w,y,x+w,y+h,r); ctx.arcTo(x+w,y+h,x,y+h,r); ctx.arcTo(x,y+h,x,y,r); ctx.arcTo(x,y,x+w,y,r); ctx.closePath(); }\r\nfunction applyOverlay(type,w,h){\r\n if(type==='soft'){ ctx.fillStyle='rgba(255,255,255,.10)'; ctx.fillRect(0,0,w,h); }\r\n if(type==='glass'){ const pad=Math.min(w,h)*0.06; roundRect(ctx,pad,pad,w-pad*2,h-pad*2,18); ctx.fillStyle='rgba(255,255,255,.12)'; ctx.fill(); ctx.strokeStyle='rgba(255,255,255,.24)'; ctx.stroke(); }\r\n if(type==='glow'){ const g=ctx.createRadialGradient(w*0.5,h*0.3,10,w*0.5,h*0.3,Math.max(w,h)*0.7); g.addColorStop(0,'rgba(255,255,255,.28)'); g.addColorStop(1,'rgba(255,255,255,0)'); ctx.fillStyle=g; ctx.fillRect(0,0,w,h); }\r\n if(type==='grain'){ const n=Math.floor((w*h)\/7000); ctx.save(); ctx.globalAlpha=.07; ctx.fillStyle='#000'; for(let i=0;i<n;i++){ const x=Math.random()*w, y=Math.random()*h, s=Math.random()*2+1; ctx.fillRect(x,y,s,s); } ctx.restore(); }\r\n}\r\n\r\n\/\/ \u2014\u2014 \u7279\u8272\u98a8\u683c \u2014\u2014 \/\/\r\nfunction applyStyle(kind,intensity,w,h,conf){ if(!kind || kind==='none') return; const k=intensity||'normal'; const a = {subtle:0.06, normal:0.12, vivid:0.2}[k] || 0.12; switch(kind){ case 'sunburst': return drawSunburst(w,h,a); case 'blobs': return drawBlobs(w,h,a); case 'memphis': return drawMemphis(w,h,a); case 'waves2': return drawWaves2(w,h,a); case 'lowpoly': return drawLowpoly(w,h,a); case 'rings': return drawRings(w,h,a); case 'halftone': return drawHalftone(w,h,a); case 'gridwarp': return drawGridWarp(w,h,a); case 'confetti': return drawConfetti(w,h,a); case 'brush': return drawBrush(w,h,a); case 'chevron': return drawChevron(w,h,a); case 'checker': return drawChecker(w,h,a); case 'rainbow': return drawRainbow(w,h,a); case 'papertop': return drawPaperTop(w,h,a); }}\r\nfunction rnd(min,max){ return Math.random()*(max-min)+min; }\r\nfunction drawSunburst(w,h,a){ ctx.save(); ctx.translate(w\/2,h\/2); const rays=28; for(let i=0;i<rays;i++){ ctx.rotate(Math.PI*2\/rays); const g=ctx.createLinearGradient(0,0,Math.max(w,h),0); g.addColorStop(0,`rgba(255,255,255,${0.8*a})`); g.addColorStop(1,'rgba(255,255,255,0)'); ctx.fillStyle=g; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(w*0.06,-Math.max(w,h)); ctx.lineTo(-w*0.06,-Math.max(w,h)); ctx.closePath(); ctx.fill(); } ctx.restore(); }\r\nfunction drawBlobs(w,h,a){ ctx.save(); ctx.globalAlpha=a; for(let i=0;i<6;i++){ const r=rnd(Math.min(w,h)*0.18, Math.min(w,h)*0.36); const x=rnd(0,w), y=rnd(0,h); const g=ctx.createRadialGradient(x,y,0,x,y,r); g.addColorStop(0,'rgba(255,255,255,0.9)'); g.addColorStop(1,'rgba(255,255,255,0)'); ctx.fillStyle=g; ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2); ctx.fill(); } ctx.restore(); }\r\nfunction drawMemphis(w,h,a){ ctx.save(); const n=14; for(let i=0;i<n;i++){ ctx.globalAlpha=a; const shape=i%4; const x=rnd(0,w), y=rnd(0,h); const s=rnd(24,80); ctx.fillStyle='rgba(255,255,255,.88)'; ctx.strokeStyle='rgba(255,255,255,.6)'; ctx.lineWidth=2; if(shape===0){ ctx.beginPath(); ctx.arc(x,y,s,0,Math.PI*2); ctx.fill(); } else if(shape===1){ ctx.beginPath(); ctx.rect(x,y,s*1.3,s*0.9); ctx.fill(); } else if(shape===2){ ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x+s,y); ctx.lineTo(x+s\/2,y-s); ctx.closePath(); ctx.fill(); } else { ctx.beginPath(); for(let t=0;t<12;t++){ const px=x+t*8, py=y+Math.sin(t\/2)*6; if(t===0) ctx.moveTo(px,py); else ctx.lineTo(px,py);} ctx.stroke(); } } ctx.restore(); }\r\nfunction drawWaves2(w,h,a){ ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle='rgba(255,255,255,.9)'; ctx.lineWidth=2; const layers=4; for(let r=0;r<layers;r++){ ctx.beginPath(); const amp=14+r*6, freq=0.008+r*0.002, y0=h*0.2+r*(h\/(layers+2)); for(let x=0;x<=w;x+=8){ const y=y0+Math.sin(x*freq+r)*amp; ctx.lineTo(x,y);} ctx.stroke(); } ctx.restore(); }\r\nfunction drawLowpoly(w,h,a){ ctx.save(); const cols=12, rows=8; const dx=w\/cols, dy=h\/rows; for(let iy=0;iy<rows;iy++){ for(let ix=0;ix<cols;ix++){ const x=ix*dx, y=iy*dy; const jitter=4; const p=[[x+rnd(-jitter,jitter), y+rnd(-jitter,jitter)],[x+dx+rnd(-jitter,jitter), y+rnd(-jitter,jitter)],[x+rnd(-jitter,jitter), y+dy+rnd(-jitter,jitter)],[x+dx+rnd(-jitter,jitter), y+dy+rnd(-jitter,jitter)]]; const tris=[[p[0],p[1],p[2]],[p[1],p[2],p[3]]]; tris.forEach(tr=>{ ctx.beginPath(); ctx.moveTo(tr[0][0],tr[0][1]); ctx.lineTo(tr[1][0],tr[1][1]); ctx.lineTo(tr[2][0],tr[2][1]); ctx.closePath(); ctx.fillStyle=`rgba(255,255,255,${a*0.8*rnd(0.6,1)})`; ctx.fill(); }); } } ctx.restore(); }\r\nfunction drawRings(w,h,a){ ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle='rgba(255,255,255,.9)'; ctx.lineWidth=3; const cx=w\/2, cy=h\/2; const max=Math.hypot(w,h)\/2; for(let r=60; r<max; r+=60){ ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2); ctx.stroke(); } ctx.restore(); }\r\nfunction drawHalftone(w,h,a){ ctx.save(); const step=28; for(let y=step\/2;y<h;y+=step){ for(let x=step\/2;x<w;x+=step){ const d = (x\/w + y\/h)\/2; const r = 4 + d*6; ctx.globalAlpha=a*0.8; ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2); ctx.fillStyle='rgba(255,255,255,1)'; ctx.fill(); } } ctx.restore(); }\r\nfunction drawGridWarp(w,h,a){ ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle='rgba(255,255,255,.9)'; ctx.lineWidth=1.2; const rows=14, cols=10; for(let i=0;i<=rows;i++){ ctx.beginPath(); for(let x=0;x<=w;x+=w\/cols){ const t=i\/rows; const y=t*h + Math.sin((x\/w)*Math.PI*2 + t*2)*6; if(x===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);} ctx.stroke(); }\r\n for(let j=0;j<=cols;j++){ ctx.beginPath(); for(let y=0;y<=h;y+=h\/rows){ const t=j\/cols; const x=t*w + Math.sin((y\/h)*Math.PI*2 + t*2)*6; if(y===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);} ctx.stroke(); } ctx.restore(); }\r\nfunction drawConfetti(w,h,a){ ctx.save(); const n=80; for(let i=0;i<n;i++){ ctx.globalAlpha=a*rnd(0.6,1); const x=rnd(0,w), y=rnd(0,h); const s=rnd(6,18); const rot=rnd(0,Math.PI); ctx.save(); ctx.translate(x,y); ctx.rotate(rot); ctx.fillStyle='rgba(255,255,255,.95)'; if(Math.random()<0.5){ ctx.fillRect(-s\/2,-s\/2,s,s*0.6);} else { ctx.beginPath(); ctx.moveTo(0,-s\/2); ctx.lineTo(s\/2,s\/2); ctx.lineTo(-s\/2,s\/2); ctx.closePath(); ctx.fill(); } ctx.restore(); } ctx.restore(); }\r\nfunction drawBrush(w,h,a){ ctx.save(); const strokes=8; for(let i=0;i<strokes;i++){ ctx.globalAlpha=a*0.9; const x=rnd(0,w*0.6), y=rnd(0,h); const wth=rnd(120,240), hth=rnd(20,46); ctx.translate(x,y); ctx.rotate(rnd(-0.3,0.3)); const g=ctx.createLinearGradient(0,0,wth,0); g.addColorStop(0,'rgba(255,255,255,.85)'); g.addColorStop(1,'rgba(255,255,255,0)'); ctx.fillStyle=g; ctx.fillRect(0,-hth\/2,wth,hth); ctx.setTransform(1,0,0,1,0,0); } ctx.restore(); }\r\nfunction drawChevron(w,h,a){ ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle='rgba(255,255,255,.9)'; ctx.lineWidth=4; const gap=60; for(let y=gap; y<h; y+=gap){ ctx.beginPath(); for(let x=-gap; x<w+gap; x+=gap){ ctx.moveTo(x,y); ctx.lineTo(x+gap\/2,y-gap\/2); ctx.lineTo(x+gap,y); } ctx.stroke(); } ctx.restore(); }\r\nfunction drawChecker(w,h,a){ ctx.save(); const size=100; for(let y=0;y<h;y+=size){ for(let x=0;x<w;x+=size){ if(((x\/size)+(y\/size))%2===0){ ctx.fillStyle=`rgba(255,255,255,${a*0.6})`; ctx.fillRect(x,y,size,size); } } } ctx.restore(); }\r\nfunction drawRainbow(w,h,a){ ctx.save(); const g=ctx.createLinearGradient(0,0,w,h); const cols=['#ff6b6b','#feca57','#48dbfb','#1dd1a1','#5f27cd']; const step=1\/(cols.length-1); cols.forEach((c,i)=>g.addColorStop(i*step,c)); ctx.globalAlpha=a*0.4; ctx.fillStyle=g; ctx.fillRect(0,0,w,h); ctx.restore(); }\r\nfunction drawPaperTop(w,h,a){ ctx.save(); ctx.globalAlpha=a*1.2; ctx.fillStyle='rgba(255,255,255,1)'; ctx.beginPath(); ctx.moveTo(0,0); for(let x=0;x<=w;x+=40){ const y=20 + Math.sin(x*0.02)*10; ctx.lineTo(x,y);} ctx.lineTo(w,0); ctx.closePath(); ctx.fill(); ctx.restore(); }\r\n\r\n\/\/ ======== \u6587\u5b57\u6392\u7248\uff1a\u5c0a\u91cd\u63db\u884c \uff0b \u81ea\u52d5\u7e2e\u653e ========\r\n\/\/ \uff08\u8986\u84cb\u539f\u672c\u7684 wrapTextToLines \u8207 fitAndDrawText\uff09\r\nfunction wrapTextToLines(text, maxWidth, font) {\r\n ctx.font = font;\r\n const chars = [...text];\r\n const lines = [];\r\n let buf = '';\r\n for (const ch of chars) {\r\n const test = buf + ch;\r\n if (ctx.measureText(test).width > maxWidth && buf) {\r\n lines.push(buf);\r\n buf = ch;\r\n } else {\r\n buf = test;\r\n }\r\n }\r\n if (buf) lines.push(buf);\r\n return lines;\r\n}\r\n\r\nfunction fitAndDrawText(text, box, fontFamily, color, opts) {\r\n const { x, y, w, h } = box;\r\n const align = opts.align || 'center';\r\n const mode = opts.mode || 'auto';\r\n const fixedPx = opts.fixedPx || 64;\r\n const lhMul = opts.lh || 1.3;\r\n const ls = opts.ls || 0;\r\n\r\n const hasBreaks = \/\\r?\\n\/.test(text);\r\n const baseLines = hasBreaks\r\n ? text.split(\/\\r?\\n\/).map(s => s.trim()).filter(Boolean)\r\n : null;\r\n\r\n function canFit(px) {\r\n const font = `700 ${px}px ${fontFamily}`;\r\n let lines = baseLines\r\n ? baseLines\r\n : wrapTextToLines(text, w * 0.92, font);\r\n\r\n ctx.font = font;\r\n for (const ln of lines) {\r\n if (ctx.measureText(ln).width > w * 0.92) return { ok: false, lines };\r\n }\r\n const lh = Math.ceil(px * lhMul);\r\n const total = lines.length * lh;\r\n return { ok: total <= h * 0.9, lines, lh, px };\r\n }\r\n\r\n let bestPx, bestLines, bestLh;\r\n\r\n if (mode === 'fixed') {\r\n const t = canFit(fixedPx);\r\n bestPx = fixedPx;\r\n bestLines = (t.lines || baseLines || [text]);\r\n bestLh = Math.ceil(fixedPx * lhMul);\r\n } else {\r\n let lo = 14, hi = Math.floor(h * 0.22);\r\n while (lo <= hi) {\r\n const mid = Math.floor((lo + hi) \/ 2);\r\n const t = canFit(mid);\r\n if (t.ok) {\r\n bestPx = mid; bestLines = t.lines; bestLh = t.lh; lo = mid + 1;\r\n } else {\r\n hi = mid - 1;\r\n }\r\n }\r\n if (!bestPx) {\r\n const t = canFit(14);\r\n bestPx = 14; bestLines = t.lines || baseLines || [text]; bestLh = Math.ceil(14 * lhMul);\r\n }\r\n }\r\n\r\n ctx.save();\r\n ctx.textAlign = align;\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = 'rgba(0,0,0,.20)';\r\n ctx.shadowBlur = Math.max(4, Math.floor(bestPx \/ 16));\r\n ctx.shadowOffsetY = Math.max(2, Math.floor(bestPx \/ 24));\r\n ctx.fillStyle = color;\r\n ctx.font = `700 ${bestPx}px ${fontFamily}`;\r\n try { ctx.letterSpacing = ls + 'px'; } catch {}\r\n\r\n const totalH = bestLines.length * bestLh;\r\n let cx = align === 'left' ? x + (w * 0.04) : (align === 'right' ? x + w - (w * 0.04) : x + w \/ 2);\r\n let cy = y + (h - totalH) \/ 2 + bestLh \/ 2;\r\n for (const line of bestLines) {\r\n ctx.fillText(line, cx, cy);\r\n cy += bestLh;\r\n }\r\n ctx.restore();\r\n}\r\n\r\nfunction drawWatermark(text,w,h,baseColor){ if(!text) return; ctx.save(); ctx.textAlign='right'; ctx.textBaseline='bottom'; ctx.font=`600 ${Math.round(Math.max(w,h)*0.028)}px ${fontSel.value}`; const isLight=(baseColor==='#ffffff'); ctx.fillStyle=isLight? 'rgba(17,24,39,.82)':'rgba(255,255,255,.92)'; ctx.fillText(text,w-24,h-18); ctx.restore(); }\r\n\r\nfunction parseSize(v){ const [w,h]=v.split('x').map(n=>parseInt(n,10)); return {w,h}; }\r\n\r\nfunction drawBackground(w,h){\r\n ctx.clearRect(0,0,w,h);\r\n ctx.fillStyle='#fff';\r\n ctx.fillRect(0,0,w,h);\r\n\r\n \/\/ \u5982\u679c\u6709\u4e0a\u50b3\u80cc\u666f\u5716\uff0c\u5148\u756b\u5716\r\n if (userBG) {\r\n const blur = parseInt(bgBlurVal.value||'0',10);\r\n const dim = parseInt(bgDimVal.value||'0',10);\r\n const fit = bgFit.value; \/\/ cover \/ contain\r\n\r\n ctx.save();\r\n if (blur>0) ctx.filter = `blur(${blur}px)`;\r\n \/\/ \u8a08\u7b97\u7f6e\u5165\r\n const iw = userBG.naturalWidth, ih = userBG.naturalHeight;\r\n const cw = w, ch = h;\r\n let sx=0, sy=0, sw=iw, sh=ih, dx=0, dy=0, dw=cw, dh=ch;\r\n\r\n const ir = iw\/ih, cr = cw\/ch;\r\n if (fit==='cover'){\r\n if (ir>cr){ \/\/ \u592a\u5bec\r\n sh = ih; sw = ih*cr; sx = (iw - sw)\/2;\r\n } else {\r\n sw = iw; sh = iw\/cr; sy = (ih - sh)\/2;\r\n }\r\n } else { \/\/ contain\r\n if (ir>cr){ dh = cw\/ir; dy = (ch - dh)\/2; }\r\n else { dw = ch*ir; dx = (cw - dw)\/2; }\r\n }\r\n if (fit==='cover') ctx.drawImage(userBG, sx,sy,sw,sh, 0,0,cw,ch);\r\n else ctx.drawImage(userBG, 0,0,iw,ih, dx,dy,dw,dh);\r\n\r\n ctx.filter='none';\r\n if (dim>0){ ctx.fillStyle=`rgba(0,0,0,${dim\/100})`; ctx.fillRect(0,0,w,h); }\r\n ctx.restore();\r\n } else {\r\n \/\/ \u7121\u80cc\u666f\u5716\uff1a\u756b\u4e3b\u984c\u6f38\u5c64\r\n const conf=pickThemeConf(themeSel.value);\r\n if(conf.type==='grad'){\r\n const g=ctx.createLinearGradient(0,0,w,h); g.addColorStop(0,hsl(...conf.colors[0])); g.addColorStop(1,hsl(...conf.colors[1])); ctx.fillStyle=g; ctx.fillRect(0,0,w,h);\r\n }\r\n }\r\n\r\n \/\/ \u7d0b\u7406\u8207\u7279\u8272\r\n let ov = overlaySel.value;\r\n applyOverlay(ov,w,h);\r\n const inten = intensitySel.value;\r\n const style = styleSel.value;\r\n applyStyle(style,inten,w,h, null);\r\n}\r\n\r\nfunction currentTextColor(){\r\n const conf=pickThemeConf(themeSel.value);\r\n const avgL=(conf.colors[0][2]+conf.colors[1][2])\/2;\r\n if(textColorSel.value==='light') return '#ffffff';\r\n if(textColorSel.value==='dark') return '#111827';\r\n return (avgL>=55? '#111827':'#ffffff');\r\n}\r\n\r\nfunction render(phrase){\r\n const {w,h}=parseSize(sizeSel.value); cv.width=w; cv.height=h; drawBackground(w,h);\r\n const pad=Math.round(Math.min(w,h)*0.12); const box={x:pad,y:pad,w:w-pad*2,h:h-pad*2};\r\n const color=currentTextColor();\r\n const opts={\r\n align: alignSel.value,\r\n mode: fontModeSel.value,\r\n fixedPx: Math.max(12,parseInt(fixedPxInput.value||'64',10)),\r\n lh: Math.max(1, parseFloat(lhInput.value||'1.3')),\r\n ls: parseFloat(lsInput.value||'0')\r\n };\r\n fitAndDrawText(phrase,box,fontSel.value,color,opts);\r\n drawWatermark((wmInput.value||'').trim(),w,h,color);\r\n}\r\n\r\nfunction getActiveList(){\r\n if (currentLib==='custom' && customList.length>0) return customList;\r\n if (currentLib==='bible'){\r\n const topic = verseTopicSel.value || 'hope';\r\n return getBibleList(topic);\r\n }\r\n return (builtinPhrases.length? builtinPhrases : fallbackPhrases);\r\n}\r\nfunction refreshPool(){ const list=getActiveList(); pool=[...Array(list.length).keys()]; updateStat(); }\r\nfunction updateStat(){ const list=getActiveList(); const used=list.length - pool.length; statInfo.textContent=`\u5df2\u62bd ${Math.max(0,used)} \/ ${list.length}`; libCount.textContent=String(list.length); }\r\nfunction ensurePhrase(){ const list=getActiveList(); lastPhrase=(list && list.length? list[0]: (fallbackPhrases[0]||'\u4e3b\u611b\u4f60\uff0c\u4eca\u5929\u4e5f\u8207\u4f60\u540c\u5728\u3002')); lastIdx=0; editText.value=lastPhrase; charCount.textContent=String(lastPhrase.length); render(lastPhrase); }\r\n\r\nfunction drawRandom(){\r\n let list=getActiveList(); if(!list || !list.length){ list=fallbackPhrases; }\r\n if(noRepeat.checked){\r\n if(pool.length===0) pool=[...Array(list.length).keys()];\r\n const r=Math.floor(Math.random()*pool.length);\r\n const idx=pool.splice(r,1)[0];\r\n lastIdx=idx; lastPhrase=list[idx];\r\n } else {\r\n let idx=Math.floor(Math.random()*list.length);\r\n if(list.length>1 && idx===lastIdx) idx=(idx+1)%list.length;\r\n lastIdx=idx; lastPhrase=list[idx];\r\n }\r\n editText.value=lastPhrase;\r\n charCount.textContent=String(lastPhrase.length);\r\n updateStat();\r\n render(lastPhrase);\r\n}\r\n\r\nfunction downloadCurrent(filename){ const name=filename||`bless_${sizeSel.value}.png`; cv.toBlob(b=>{ const a=document.createElement('a'); a.href=URL.createObjectURL(b); a.download=name; a.click(); setTimeout(()=>URL.revokeObjectURL(a.href), 1200); }); }\r\nfunction downloadAllThree(){ const sizes=['1080x1080','1080x1920','1920x1080']; const saved=sizeSel.value; const phrase=lastPhrase||getActiveList()[0]||fallbackPhrases[0]; (async()=>{ for(const s of sizes){ sizeSel.value=s; render(phrase); await new Promise(r=>setTimeout(r,60)); downloadCurrent(`bless_${s}.png`); await new Promise(r=>setTimeout(r,80)); } sizeSel.value=saved; render(phrase); })(); }\r\nfunction shareCurrent(){ cv.toBlob(async blob=>{ if(!blob){ downloadCurrent(); return;} const file=new File([blob],`bless_${sizeSel.value}.png`,{type:'image\/png'}); if(navigator.share && navigator.canShare && navigator.canShare({files:[file]})){ try{ await navigator.share({files:[file],title:'\u795d\u798f\u5c0f\u5361'});}catch(e){} } else { downloadCurrent(); } }); }\r\nfunction toast(msg){ const el=document.createElement('div'); el.textContent=msg; el.style.cssText='position:fixed;left:50%;top:14px;transform:translateX(-50%);background:#111827;color:#f8fafc;border:1px solid #0ea5e9;padding:8px 12px;border-radius:10px;z-index:9999;box-shadow:0 8px 30px rgba(0,0,0,.25);font-weight:700'; document.body.appendChild(el); setTimeout(()=>el.remove(),1400); }\r\n\r\n\/\/ ====== \u4e8b\u4ef6 ======\r\n['sizeSel','fontSel','themeSel','overlaySel','textColorSel','styleSel','intensitySel',\r\n 'fontModeSel','fixedPx','alignSel','lsInput','lhInput'\r\n].forEach(id=>{ const el=$(id); el.addEventListener('change', ()=>{ if(!lastPhrase) ensurePhrase(); else render(lastPhrase); }); el.addEventListener('input', ()=>{ if(!lastPhrase) ensurePhrase(); else render(lastPhrase); }); });\r\n\r\nwmInput.addEventListener('input', ()=>{ if(lastPhrase) render(lastPhrase); });\r\nnoRepeat.addEventListener('change',()=>{ refreshPool(); });\r\nautoNewBg.addEventListener('change',()=>{ \/* \u9810\u7559\uff1a\u82e5\u8981\u6bcf\u6b21\u81ea\u52d5\u63db\u98a8\u683c *\/ });\r\n\r\nlibSel.addEventListener('change',()=>{\r\n currentLib=libSel.value;\r\n customBox.style.display=(currentLib==='custom')? '':'none';\r\n bibleBox.style.display=(currentLib==='bible')? '':'';\r\n refreshPool(); ensurePhrase();\r\n});\r\nverseTopicSel.addEventListener('change',()=>{ if(currentLib==='bible'){ refreshPool(); ensurePhrase(); }});\r\n\r\ncustomArea.addEventListener('input',()=>{ const lines=customArea.value.split(\/\\n+\/).map(s=>s.trim()).filter(Boolean); customList=lines; saveCustom(customList); refreshPool(); \/* \u4e0d\u81ea\u52d5\u8986\u84cb\u756b\u9762 *\/ });\r\nimportSample.addEventListener('click',()=>{ const sample=[\r\n '\u4eca\u5929\u4e5f\u8981\u88ab\u611b\u5305\u570d\u3002','\u653e\u4e0b\u64d4\u6182\uff0c\u63a5\u4f4f\u5e73\u5b89\u3002','\u4f60\u88ab\u770b\u898b\uff0c\u4e5f\u88ab\u73cd\u60dc\u3002','\u9858\u597d\u6d88\u606f\u81e8\u5230\u4f60\u3002','\u7942\u727d\u8457\u4f60\u8d70\u904e\u4eca\u5929\u3002','\u5fc3\u88e1\u6709\u5149\uff0c\u8173\u4e0b\u6709\u8def\u3002','\u7b11\u8457\u9762\u5c0d\uff0c\u6069\u5178\u76f8\u96a8\u3002','\u4e3b\u5df2\u9810\u5099\uff0c\u4f60\u8981\u653e\u5fc3\u3002','\u8edf\u5f31\u6642\u66f4\u9760\u8fd1\u7942\u3002','\u51e1\u4e8b\u611f\u6069\uff0c\u559c\u6a02\u52a0\u500d\u3002','\u8010\u5fc3\u7b49\u5019\uff0c\u7f8e\u597d\u6b63\u4f86\u3002','\u9858\u75b2\u618a\u5f97\u5b89\u606f\u3002','\u9858\u50b7\u5fc3\u88ab\u5b89\u6170\u3002','\u9858\u7126\u616e\u5f97\u5be7\u975c\u3002','\u9858\u8ff7\u60d8\u5f97\u65b9\u5411\u3002','\u9858\u5b64\u55ae\u5f97\u64c1\u62b1\u3002','\u9858\u5bb6\u5ead\u6709\u5408\u4e00\u3002','\u9858\u5de5\u4f5c\u6709\u7a81\u7834\u3002','\u9858\u8eab\u9ad4\u5f97\u525b\u5f37\u3002','\u9858\u9748\u88e1\u66f4\u706b\u71b1\u3002',\r\n]; customList=sample; customArea.value=sample.join('\\n'); saveCustom(customList); refreshPool(); });\r\nclearCustom.addEventListener('click',()=>{ customList=[]; customArea.value=''; saveCustom(customList); refreshPool(); });\r\n\r\napplyNow.addEventListener('click',()=>{ const t=(editText.value||'').trim(); if(!t) return; lastPhrase=t; render(lastPhrase); });\r\nrevertText.addEventListener('click',()=>{ const list=getActiveList(); lastPhrase = list[lastIdx] || list[0] || '\u4e3b\u611b\u4f60\uff0c\u4eca\u5929\u4e5f\u8207\u4f60\u540c\u5728\u3002'; editText.value=lastPhrase; charCount.textContent=String(lastPhrase.length); render(lastPhrase); });\r\nsaveToCustom.addEventListener('click',()=>{ const t=(editText.value||'').trim(); if(!t) return toast('\u6c92\u6709\u5167\u5bb9\u53ef\u5132\u5b58'); if(!customList.includes(t)){ customList.push(t); saveCustom(customList); toast('\u5df2\u5b58\u5230\u81ea\u8a02\u8a5e\u5eab'); } else { toast('\u81ea\u8a02\u8a5e\u5eab\u5df2\u6709\u6b64\u53e5'); } });\r\n\r\neditText.addEventListener('input',()=>{ charCount.textContent=String((editText.value||'').length); });\r\n\r\ndrawBtn.addEventListener('click',drawRandom);\r\nredrawBtn.addEventListener('click',()=>{ if(!lastPhrase) ensurePhrase(); else render(lastPhrase); });\r\ndlBtn.addEventListener('click',()=>downloadCurrent());\r\ndlAllBtn.addEventListener('click',downloadAllThree);\r\nshareBtn.addEventListener('click',shareCurrent);\r\n\r\n\/\/ \u80cc\u666f\u6a94\u6848\r\nbgFile.addEventListener('change', (e)=>{\r\n const f=e.target.files && e.target.files[0]; if(!f) return;\r\n const img=new Image(); img.onload=()=>{ userBG=img; render(lastPhrase||''); }; img.src=URL.createObjectURL(f);\r\n});\r\nbgFit.addEventListener('change', ()=>{ if(lastPhrase) render(lastPhrase); });\r\nbgBlurVal.addEventListener('input', ()=>{ if(lastPhrase) render(lastPhrase); });\r\nbgDimVal.addEventListener('input', ()=>{ if(lastPhrase) render(lastPhrase); });\r\nclearBg.addEventListener('click', ()=>{ userBG=null; bgFile.value=''; render(lastPhrase||''); });\r\n\r\n\/\/ ====== \u521d\u59cb\u5316 ======\r\n(function init(){\r\n try{\r\n bibleBox.style.display='none';\r\n refreshPool();\r\n ensurePhrase();\r\n }catch(e){ console.error(e); toast('\u521d\u59cb\u5316\u6642\u767c\u751f\u932f\u8aa4\uff0c\u8acb\u91cd\u6574'); }\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\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>\u795d\u798f\u8a5e\u62bd\u7c64\u5668 v3\uff08\u767d\u7070\uff0b\u7279\u8272\u98a8\u683c\uff5c\u55ae\u6a94 HTML\uff09 \u795d\u798f\u8a5e\u62bd\u7c64\u5668\uff08\u5c0f\u904a\u6232\uff09 \u5c3a\u5bf8 1:1\uff081080\u00d71080 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-5234","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails","has-product-nav"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"jetpack_sharing_enabled":true,"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"Meiling","author_link":"https:\/\/meiling412.com\/zh\/author\/lin576688103gmail-com\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"\u795d\u798f\u8a5e\u62bd\u7c64\u5668 v3\uff08\u767d\u7070\uff0b\u7279\u8272\u98a8\u683c\uff5c\u55ae\u6a94 HTML\uff09 \u795d\u798f\u8a5e\u62bd\u7c64\u5668\uff08\u5c0f\u904a\u6232\uff09 \u5c3a\u5bf8 1:1\uff081080\u00d71080…","_links":{"self":[{"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/pages\/5234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/comments?post=5234"}],"version-history":[{"count":34,"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/pages\/5234\/revisions"}],"predecessor-version":[{"id":5272,"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/pages\/5234\/revisions\/5272"}],"wp:attachment":[{"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/media?parent=5234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\u795d\u798f\u8a5e\u62bd\u7c64\u5668 v3\uff08\u767d\u7070\uff0b\u7279\u8272\u98a8\u683c\uff5c\u55ae\u6a94 HTML\uff09<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;600;700;900&family=Noto+Serif+TC:wght@600;700&family=Zen+Maru+Gothic:wght@700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n \/* ===== \u4f5c\u7528\u57df\uff1a\u907f\u514d\u53d7\u5230 WP \u4e3b\u984c\u5e72\u64fe ===== *\/\r\n .bd-app{ --bg:#ffffff; --panel:#ffffff; --soft:#f1f5f9; --line:#d7dce6; --text:#0f172a; --muted:#64748b; --accent:#2563eb; }\r\n .bd-app *{ box-sizing:border-box }\r\n .bd-app{ color:var(--text); font-family:\"Noto Sans TC\",system-ui,Segoe UI,Roboto,Helvetica,Arial }\r\n\r\n .bd-wrap{ display:grid; grid-template-columns:360px 1fr; gap:20px; max-width:1280px; margin:0 auto; padding:16px }\r\n .bd-left{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; position:sticky; top:16px; height:calc(100dvh - 32px); overflow:auto; box-shadow:0 6px 24px rgba(2,6,23,.04) }\r\n .bd-right{ min-width:0 }\r\n .bd-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; margin-bottom:12px }\r\n .bd-app h1{ font-size:20px; margin:0 0 8px; font-weight:900 }\r\n .bd-app h3{ font-size:14px; margin:4px 0 6px; font-weight:800 }\r\n .bd-label{ font-size:12px; color:var(--muted); display:block; margin-bottom:4px }\r\n .bd-cols{ display:grid; grid-template-columns:1fr 1fr; gap:8px }\r\n .bd-input, .bd-select, .bd-textarea{ width:100%; background:#fff!important; color:var(--text)!important; border:1px solid var(--line)!important; border-radius:10px; font: 14px\/1.4 inherit; height:40px; padding:10px 42px 10px 12px; -webkit-padding-end:42px; white-space:nowrap; text-overflow:ellipsis; outline:none }\r\n .bd-textarea{ height:auto; min-height:90px; resize:vertical; padding:10px 12px }\r\n .bd-pill{ display:flex; flex-wrap:wrap; gap:8px }\r\n .bd-btn{ background:#fff; border:1px solid var(--line); color:var(--text); padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:800 }\r\n .bd-btn.ok{ background:#2563eb !important; color:#fff !important; border-color:#1d4ed8 !important }\r\n .bd-btn.ghost{ background:#f8fafc }\r\n .bd-stat{ font-size:12px; color:var(--muted) }\r\n .bd-preview{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px }\r\n .bd-canvas{ background:#fff; border-radius:12px; border:1px solid var(--line); max-width:100%; width:100%; height:auto; display:block }\r\n .bd-range{ width:100% }\r\n .bd-note{ font-size:12px; color:var(--muted); margin-top:6px }\r\n @media (max-width:1000px){ .bd-wrap{ grid-template-columns:1fr } .bd-left{ position:static; height:auto } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"bd-app\">\r\n <div class=\"bd-wrap\">\r\n <aside class=\"bd-left\">\r\n <h1>\u795d\u798f\u8a5e\u62bd\u7c64\u5668\uff08\u5c0f\u904a\u6232\uff09<\/h1>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <div class=\"bd-cols\">\r\n <div>\r\n <label class=\"bd-label\">\u5c3a\u5bf8<\/label>\r\n <select id=\"sizeSel\" class=\"bd-select\">\r\n <option value=\"1080x1080\">1:1\uff081080\u00d71080\uff09<\/option>\r\n <option value=\"1080x1920\">9:16\uff081080\u00d71920\uff09<\/option>\r\n <option value=\"1920x1080\">16:9\uff081920\u00d71080\uff09<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u5b57\u9ad4<\/label>\r\n <select id=\"fontSel\" class=\"bd-select\">\r\n <option value=\"Noto Sans TC\">Noto Sans TC<\/option>\r\n <option value=\"Noto Serif TC\">Noto Serif TC<\/option>\r\n <option value=\"Zen Maru Gothic\">Zen Maru Gothic<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bd-cols\" style=\"margin-top:8px\">\r\n <div>\r\n <label class=\"bd-label\">\u4e3b\u984c\u98a8\u683c\uff08\u5e95\u8272\uff09<\/label>\r\n <select id=\"themeSel\" class=\"bd-select\">\r\n <option value=\"dawn\" selected>Dawn \u6696\u6668\uff08\u4eae\uff09<\/option>\r\n <option value=\"grace\">Grace \u67d4\u5149<\/option>\r\n <option value=\"sky\">Sky \u9ad8\u7a7a<\/option>\r\n <option value=\"peach\">Peach \u871c\u6843<\/option>\r\n <option value=\"mint\">Mint \u8584\u8377<\/option>\r\n <option value=\"ocean\">Ocean \u975c\u6d77<\/option>\r\n <option value=\"rose\">Rose \u73ab\u7470<\/option>\r\n <option value=\"lavender\">Lavender \u85b0\u8863<\/option>\r\n <option value=\"amber\">Amber \u7425\u73c0<\/option>\r\n <option value=\"emerald\">Emerald \u7fe1\u7fe0<\/option>\r\n <option value=\"indigo\">Indigo \u975b\u85cd<\/option>\r\n <option value=\"slate\">Slate \u5ca9\u9801<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u6c34\u5370\uff08\u53ef\u7559\u7a7a\uff09<\/label>\r\n <input id=\"wmInput\" class=\"bd-input\" type=\"text\" placeholder=\"\u4f8b\uff1a\u5bf6\u8c9d\u7684\u9748\u7ce7\u5c4b\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <h3>\u4e0a\u50b3\u80cc\u666f\u5716<\/h3>\r\n <div class=\"bd-cols\">\r\n <div>\r\n <label class=\"bd-label\">\u6311\u9078\u5716\u7247<\/label>\r\n <input id=\"bgFile\" type=\"file\" class=\"bd-input\" accept=\"image\/*\" \/>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u9069\u61c9\u65b9\u5f0f<\/label>\r\n <select id=\"bgFit\" class=\"bd-select\">\r\n <option value=\"cover\" selected>\u92ea\u6eff\uff08cover\uff09<\/option>\r\n <option value=\"contain\">\u7f6e\u5165\uff08contain\uff09<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bd-cols\" style=\"margin-top:8px\">\r\n <div>\r\n <label class=\"bd-label\">\u80cc\u666f\u6a21\u7cca\uff08px\uff09<\/label>\r\n <input id=\"bgBlurVal\" class=\"bd-range\" type=\"range\" min=\"0\" max=\"30\" step=\"1\" value=\"0\" \/>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u6697\u5316\uff08%\uff09<\/label>\r\n <input id=\"bgDimVal\" class=\"bd-range\" type=\"range\" min=\"0\" max=\"70\" step=\"1\" value=\"0\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bd-pill\" style=\"margin-top:8px\">\r\n <button class=\"bd-btn\" id=\"clearBg\">\ud83e\uddfd \u6e05\u9664\u80cc\u666f<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <div class=\"bd-cols\">\r\n <div>\r\n <label class=\"bd-label\">\u80cc\u666f\u7d0b\u7406<\/label>\r\n <select id=\"overlaySel\" class=\"bd-select\">\r\n <option value=\"none\" selected>\u6975\u7c21\uff08\u7121\uff09<\/option>\r\n <option value=\"soft\">\u67d4\u5149<\/option>\r\n <option value=\"glass\">\u73bb\u7483\u5361\u7247<\/option>\r\n <option value=\"glow\">\u5149\u6688<\/option>\r\n <option value=\"grain\">\u7d30\u5fae\u9846\u7c92<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u6587\u5b57\u984f\u8272<\/label>\r\n <select id=\"textColorSel\" class=\"bd-select\">\r\n <option value=\"auto\" selected>\u81ea\u52d5\uff08\u4f9d\u80cc\u666f\u4eae\u5ea6\uff09<\/option>\r\n <option value=\"dark\">\u6df1\u8272<\/option>\r\n <option value=\"light\">\u6dfa\u8272<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bd-cols\" style=\"margin-top:8px\">\r\n <div>\r\n <label class=\"bd-label\">\u7279\u8272\u98a8\u683c\uff08\u66f4\u6709\u8fa8\u8b58\u5ea6\uff09<\/label>\r\n <select id=\"styleSel\" class=\"bd-select\">\r\n <option value=\"none\" selected>\u7121\uff08\u4fdd\u6301\u7c21\u7d04\uff09<\/option>\r\n <option value=\"sunburst\">Sunburst \u66dc\u5149\u653e\u5c04<\/option>\r\n <option value=\"blobs\">Blobs \u6f38\u5c64\u58a8\u6591<\/option>\r\n <option value=\"memphis\">Memphis \u5e7e\u4f55\u62fc\u8cbc<\/option>\r\n <option value=\"waves2\">Waves \u5c64\u758a\u6d41\u7dda<\/option>\r\n <option value=\"lowpoly\">Low-poly \u5e7e\u4f55\u9762<\/option>\r\n <option value=\"rings\">Rings \u540c\u5fc3\u5713<\/option>\r\n <option value=\"halftone\">Halftone \u7db2\u9ede\u6f38\u8b8a<\/option>\r\n <option value=\"gridwarp\">Grid-warp \u900f\u8996\u683c<\/option>\r\n <option value=\"confetti\">Confetti \u7d19\u5c51<\/option>\r\n <option value=\"brush\">Brush \u7b46\u5237<\/option>\r\n <option value=\"chevron\">Chevron \u4eba\u5b57\u7d0b<\/option>\r\n <option value=\"checker\">Checker \u68cb\u76e4\u6de1\u683c<\/option>\r\n <option value=\"rainbow\">Spectrum \u5f69\u8679\u5149\u8b5c<\/option>\r\n <option value=\"papertop\">Paper Tear \u6495\u7d19\u908a<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u98a8\u683c\u5f37\u5ea6<\/label>\r\n <select id=\"intensitySel\" class=\"bd-select\">\r\n <option value=\"subtle\">\u6de1<\/option>\r\n <option value=\"normal\" selected>\u4e2d<\/option>\r\n <option value=\"vivid\">\u5f37<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bd-pill\" style=\"margin-top:8px\">\r\n <label style=\"display:flex;align-items:center;gap:8px\"><input id=\"noRepeat\" type=\"checkbox\" checked>\u907f\u514d\u91cd\u8986\u62bd\u53d6<\/label>\r\n <label style=\"display:flex;align-items:center;gap:8px\"><input id=\"autoNewBg\" type=\"checkbox\" checked>\u6bcf\u6b21\u62bd\u63db\u80cc\u666f<\/label>\r\n <\/div>\r\n <div class=\"bd-pill\" style=\"margin-top:8px\">\r\n <button class=\"bd-btn ok\" id=\"drawBtn\">\ud83c\udfb2 \u62bd\u4e00\u689d<\/button>\r\n <button class=\"bd-btn\" id=\"redrawBtn\">\u267b\ufe0f \u91cd\u7e6a<\/button>\r\n <button class=\"bd-btn ghost\" id=\"resetPoolBtn\">\ud83e\uddf9 \u91cd\u7f6e\u6c60<\/button>\r\n <div class=\"bd-stat\" id=\"statInfo\" style=\"margin-left:auto\">\u5df2\u62bd 0 \/ 0<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <div class=\"bd-pill\">\r\n <button class=\"bd-btn\" id=\"dlBtn\">\u2b07\ufe0f \u4e0b\u8f09 PNG<\/button>\r\n <button class=\"bd-btn\" id=\"dlAllBtn\">\u2b07\ufe0f \u4e00\u9375\u4e09\u5c3a\u5bf8<\/button>\r\n <button class=\"bd-btn\" id=\"shareBtn\">\ud83d\udce4 \u5206\u4eab\uff08\u884c\u52d5\u88dd\u7f6e\uff09<\/button>\r\n <\/div>\r\n <div class=\"bd-stat\">\u63d0\u793a\uff1a\u652f\u63f4 <code>navigator.share<\/code> \u7684\u624b\u6a5f\u53ef\u76f4\u63a5\u5206\u4eab\u5716\u7247\uff1b\u5426\u5247\u6703\u89f8\u767c\u4e0b\u8f09\u3002<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <h3>\u4f86\u6e90<\/h3>\r\n <div class=\"bd-cols\">\r\n <div>\r\n <label class=\"bd-label\">\u4f7f\u7528\u54ea\u500b\u4f86\u6e90\uff1f<\/label>\r\n <select id=\"libSel\" class=\"bd-select\">\r\n <option value=\"builtin\" selected>\u5167\u5efa\u795d\u798f\u8a5e\uff08\u7d04 300\uff09<\/option>\r\n <option value=\"bible\">\u8056\u7d93\u91d1\u53e5\uff08\u7cbe\u9078\u4e3b\u984c\uff09<\/option>\r\n <option value=\"custom\">\u81ea\u8a02\u8a5e\u5eab\uff08\u5132\u5b58\u5728\u672c\u6a5f\uff09<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"bibleBox\">\r\n <label class=\"bd-label\">\u91d1\u53e5\u4e3b\u984c<\/label>\r\n <select id=\"verseTopicSel\" class=\"bd-select\">\r\n <option value=\"hope\">\u76fc\u671b<\/option>\r\n <option value=\"comfort\">\u5b89\u6170<\/option>\r\n <option value=\"healing\">\u91ab\u6cbb<\/option>\r\n <option value=\"peace\">\u5e73\u5b89<\/option>\r\n <option value=\"joy\">\u559c\u6a02<\/option>\r\n <option value=\"strength\">\u525b\u5f37<\/option>\r\n <option value=\"provision\">\u4f9b\u61c9<\/option>\r\n <option value=\"guidance\">\u5f15\u5c0e\uff0f\u9053\u8def<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div id=\"customBox\" style=\"display:none;margin-top:8px\">\r\n <label class=\"bd-label\">\u81ea\u8a02\u8a5e\u5eab\uff08\u6bcf\u884c\u4e00\u53e5\uff09<\/label>\r\n <textarea id=\"customArea\" class=\"bd-textarea\" placeholder=\"\u6bcf\u884c\u4e00\u689d\u795d\u798f\u8a5e\uff0c\u4f8b\u5982\uff1a \u9858\u4e3b\u7684\u5e73\u5b89\u8207\u4f60\u540c\u5728 \u9858\u4e3b\u8cdc\u4f60\u667a\u6167\u4f5c\u6bcf\u500b\u9078\u64c7 \u2026\"><\/textarea>\r\n <div class=\"bd-pill\" style=\"margin-top:6px\">\r\n <button class=\"bd-btn\" id=\"importSample\">\u532f\u5165\u793a\u4f8b 40 \u53e5<\/button>\r\n <button class=\"bd-btn ghost\" id=\"clearCustom\">\u6e05\u7a7a<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bd-stat\">\u72c0\u614b\uff1a<span id=\"libCount\">0<\/span> \u689d\u53ef\u7528<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bd-card\">\r\n <h3>\u7de8\u8f2f\u76ee\u524d\u53e5\u5b50<\/h3>\r\n <textarea id=\"editText\" class=\"bd-textarea\" placeholder=\"\u5728\u6b64\u76f4\u63a5\u4fee\u6539\u6587\u5b57\u2026\"><\/textarea>\r\n <div class=\"bd-pill\" style=\"margin-top:6px\">\r\n <button class=\"bd-btn ok\" id=\"applyNow\">\u5957\u7528\u5230\u756b\u9762<\/button>\r\n <button class=\"bd-btn\" id=\"revertText\">\u9084\u539f\u62bd\u5230\u7684\u53e5\u5b50<\/button>\r\n <button class=\"bd-btn\" id=\"saveToCustom\">\u5b58\u5230\u81ea\u8a02\u8a5e\u5eab<\/button>\r\n <\/div>\r\n <div class=\"bd-stat\">\u5b57\u6578\uff1a<span id=\"charCount\">0<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"bd-card\">\r\n <h3>\u6587\u5b57\u6392\u7248<\/h3>\r\n <div class=\"bd-cols\">\r\n <div>\r\n <label class=\"bd-label\">\u5b57\u7d1a\u6a21\u5f0f<\/label>\r\n <select id=\"fontModeSel\" class=\"bd-select\">\r\n <option value=\"auto\" selected>\u81ea\u52d5\uff08\u6700\u4f73\u5316\uff09<\/option>\r\n <option value=\"fixed\">\u56fa\u5b9a\uff08px\uff09<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u56fa\u5b9a\u5b57\u7d1a\uff08px\uff09<\/label>\r\n <input id=\"fixedPx\" class=\"bd-input\" type=\"number\" value=\"64\" min=\"12\" max=\"200\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bd-cols\" style=\"margin-top:8px\">\r\n <div>\r\n <label class=\"bd-label\">\u5c0d\u9f4a<\/label>\r\n <select id=\"alignSel\" class=\"bd-select\">\r\n <option value=\"center\" selected>\u7f6e\u4e2d<\/option>\r\n <option value=\"left\">\u9760\u5de6<\/option>\r\n <option value=\"right\">\u9760\u53f3<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"bd-label\">\u5b57\u8ddd\uff08px\uff09<\/label>\r\n <input id=\"lsInput\" class=\"bd-input\" type=\"number\" step=\"0.5\" value=\"0\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bd-cols\" style=\"margin-top:8px\">\r\n <div>\r\n <label class=\"bd-label\">\u884c\u9ad8\u500d\u7387<\/label>\r\n <input id=\"lhInput\" class=\"bd-input\" type=\"number\" step=\"0.05\" value=\"1.30\" \/>\r\n <\/div>\r\n <div><\/div>\r\n <\/div>\r\n <div class=\"bd-note\">\u63d0\u793a\uff1a\u8f38\u5165\u5167\u5982\u542b\u6709\u63db\u884c\uff08\u6bcf\u884c\u6309\u4e00\u6b21 Enter\uff09\uff0c\u5c07\u300c\u5b8c\u5168\u5c0a\u91cd\u300d\u4f60\u7684\u63db\u884c\uff1b\u7cfb\u7d71\u53ea\u6703\u81ea\u52d5\u7b49\u6bd4\u7e2e\u5c0f\u5b57\u7d1a\u8b93\u5167\u5bb9\u585e\u9032\u6846\u3002<\/div>\r\n <\/div>\r\n <\/aside>\r\n\r\n <main class=\"bd-right\">\r\n <div class=\"bd-preview\">\r\n <canvas id=\"cv\" class=\"bd-canvas\" width=\"1080\" height=\"1080\" aria-label=\"\u9810\u89bd\u756b\u5e03\"><\/canvas>\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ====== \u4fbf\u6377 ======\r\nconst $ = (id)=>document.getElementById(id);\r\nconst cv = $('cv');\r\nconst ctx = cv.getContext('2d');\r\n\r\nconst sizeSel=$('sizeSel'), fontSel=$('fontSel'), themeSel=$('themeSel'),\r\n overlaySel=$('overlaySel'), textColorSel=$('textColorSel'),\r\n styleSel=$('styleSel'), intensitySel=$('intensitySel'),\r\n wmInput=$('wmInput'),\r\n noRepeat=$('noRepeat'), autoNewBg=$('autoNewBg'),\r\n drawBtn=$('drawBtn'), redrawBtn=$('redrawBtn'), resetPoolBtn=$('resetPoolBtn'),\r\n dlBtn=$('dlBtn'), dlAllBtn=$('dlAllBtn'), shareBtn=$('shareBtn'),\r\n libSel=$('libSel'), customBox=$('customBox'), customArea=$('customArea'),\r\n importSample=$('importSample'), clearCustom=$('clearCustom'),\r\n libCount=$('libCount'), statInfo=$('statInfo'),\r\n editText=$('editText'), applyNow=$('applyNow'), revertText=$('revertText'), saveToCustom=$('saveToCustom'),\r\n charCount=$('charCount'),\r\n fontModeSel=$('fontModeSel'), fixedPxInput=$('fixedPx'), alignSel=$('alignSel'), lsInput=$('lsInput'), lhInput=$('lhInput');\r\n\r\nconst bgFile=$('bgFile'), bgFit=$('bgFit'), bgBlurVal=$('bgBlurVal'), bgDimVal=$('bgDimVal'), clearBg=$('clearBg');\r\nconst verseTopicSel=$('verseTopicSel'), bibleBox=$('bibleBox');\r\n\r\n\/\/ \u80cc\u666f\u5716\r\nlet userBG=null;\r\n\r\n\/\/ ====== \u8a5e\u5eab\uff1a\u795d\u798f\u8a5e\uff08300 \u53e5\uff09 ======\r\nvar fallbackPhrases=[\r\n '\u4e3b\u611b\u4f60\uff0c\u4eca\u5929\u4e5f\u8207\u4f60\u540c\u5728\u3002','\u628a\u91cd\u64d4\u4ea4\u7d66\u7942\uff0c\u4f60\u5fc5\u5f97\u5b89\u606f\u3002','\u9858\u5e73\u5b89\u5982\u6cb3\u6d41\u9032\u4f60\u5fc3\u3002','\u4f60\u88ab\u770b\u898b\uff0c\u4e5f\u88ab\u73cd\u60dc\u3002','\u5728\u5bb3\u6015\u6642\uff0c\u4e3b\u63e1\u8457\u4f60\u7684\u624b\u3002'\r\n];\r\nvar baseCurated=[\r\n '\u9858\u4e3b\u7684\u5e73\u5b89\u5982\u6cb3\u6d41\u6dcc\u5728\u4f60\u5fc3\u4e2d\u3002', '\u6c42\u4e3b\u4eca\u65e5\u4ee5\u559c\u6a02\u5145\u6eff\u4f60\u3002', '\u8edf\u5f31\u8655\uff0c\u4e3b\u6210\u70ba\u4f60\u525b\u5f37\u3002',\r\n '\u4e3b\u7684\u5149\u7167\u4eae\u4f60\u7684\u8173\u6b65\uff0c\u4e0d\u518d\u8ff7\u832b\u3002', '\u628a\u91cd\u64d4\u4ea4\u7d66\u7942\uff0c\u4f60\u5fc5\u5f97\u5b89\u606f\u3002', '\u9858\u4e3b\u8cdc\u4f60\u667a\u6167\u4f5c\u6bcf\u500b\u9078\u64c7\u3002',\r\n '\u4e3b\u662f\u4f60\u7684\u7267\u8005\uff0c\u4f60\u5fc5\u4e0d\u81f3\u7f3a\u4e4f\u3002', '\u4e3b\u7684\u8a71\u662f\u4f60\u8173\u524d\u7684\u71c8\u3001\u8def\u4e0a\u7684\u5149\u3002', '\u6069\u5178\u5920\u7528\uff0c\u80fd\u529b\u5728\u8edf\u5f31\u4e0a\u986f\u5f97\u5b8c\u5168\u3002',\r\n '\u5728\u4e3b\u88e1\uff0c\u4f60\u6c38\u4e0d\u5b64\u55ae\u3002','\u9858\u4f60\u5728\u5fd9\u788c\u4e2d\u4ecd\u80fd\u5b89\u975c\u5f97\u529b\u3002','\u4e3b\u770b\u9867\u4f60\u7684\u51fa\u4e5f\u770b\u9867\u4f60\u7684\u5165\u3002',\r\n '\u9858\u76fc\u671b\u5728\u4f60\u5fc3\u88e1\u518d\u6b21\u9ede\u71c3\u3002','\u4e3b\u89aa\u81ea\u70ba\u4f60\u9810\u5099\u6700\u5408\u9069\u7684\u6642\u9593\u3002','\u9858\u4f60\u5411\u4e0b\u624e\u6839\uff0c\u5411\u4e0a\u7d50\u679c\u3002',\r\n '\u9858\u4f60\u5728\u7b49\u5f85\u4e2d\u5b78\u6703\u5b89\u7a69\u8207\u4fe1\u9760\u3002','\u795e\u5fc5\u70ba\u4f60\u722d\u6230\uff0c\u4f60\u53ea\u8981\u975c\u9ed8\u3002','\u4e3b\u611b\u4f60\uff0c\u6c92\u6709\u6539\u8b8a\u3002',\r\n '\u9858\u4f60\u88ab\u8056\u9748\u7684\u559c\u6a02\u5145\u6eff\u3002','\u9858\u4f60\u7684\u5bb6\u5ead\u88ab\u611b\u8207\u5408\u4e00\u5145\u6eff\u3002'\r\n];\r\nfunction buildBuiltin300(base){\r\n const curated = Array.isArray(base)? base.slice(): [];\r\n const target = 300; const out = curated.slice();\r\n const P=['\u9858\u4e3b','\u6c42\u4e3b','\u9858\u4f60','\u4e3b\u5fc5'];\r\n const A=['\u4ee5\u5e73\u5b89\u74b0\u7e5e','\u8cdc\u4e0b\u667a\u6167\u8207\u52c7\u6c23','\u89aa\u81ea\u91ab\u6cbb','\u5f15\u5c0e\u6bcf\u4e00\u6b65','\u89aa\u81ea\u5b89\u6170','\u52a0\u6dfb\u529b\u91cf','\u958b\u65b0\u7684\u9053\u8def','\u4fdd\u5b88\u5fc3\u61f7\u610f\u5ff5','\u64e6\u53bb\u773c\u6dda','\u6210\u70ba\u4f60\u7684\u76fe\u724c','\u4f7f\u4f60\u624b\u4e2d\u6240\u4f5c\u76e1\u90fd\u9806\u5229','\u8cdc\u4f60\u8d85\u904e\u6240\u6c42\u6240\u60f3','\u5728\u9ed1\u591c\u9ede\u71c8','\u8b93\u4f60\u91cd\u65b0\u5f97\u529b','\u4f7f\u4f60\u5728\u7b49\u5f85\u4e2d\u4ecd\u559c\u6a02','\u8b93\u4f60\u770b\u898b\u81ea\u5df1\u7684\u5bf6\u8cb4','\u8b93\u4f60\u9047\u898b\u8a72\u9047\u898b\u7684\u4eba','\u727d\u8457\u4f60\u5f80\u524d\u8d70','\u5728\u4f60\u6240\u5230\u4e4b\u8655\u5e36\u4f86\u548c\u5e73','\u6210\u70ba\u4ed6\u4eba\u7684\u795d\u798f','\u4e0d\u518d\u88ab\u6050\u61fc\u7d81\u4f4f','\u628a\u64d4\u6182\u5316\u4f5c\u79b1\u544a','\u4ee5\u6069\u5178\u4ee3\u66ff\u6279\u8a55','\u4ee5\u76fc\u671b\u66ff\u63db\u5931\u671b','\u4ee5\u771f\u7406\u5805\u56fa','\u4fee\u76f4\u4f60\u524d\u9762\u7684\u8def','\u9810\u5099\u5408\u9069\u7684\u6642\u6a5f'];\r\n const T=['\u4f60','\u4f60\u5fc3','\u4f60\u7684\u4eca\u5929','\u4f60\u7684\u660e\u5929','\u4f60\u7684\u5bb6\u5ead','\u4f60\u7684\u9748\u88e1','\u4f60\u6240\u611b\u7684\u4eba','\u4f60\u7684\u8077\u5834','\u4f60\u7684\u670d\u4e8b','\u4f60\u7684\u5b78\u696d'];\r\n const S=['\u628a\u91cd\u64d4\u4ea4\u7d66\u7942','\u7576\u4f60\u611f\u5230\u8edf\u5f31\u6642','\u5728\u4f60\u5bb3\u6015\u7684\u6642\u5019','\u7576\u9053\u8def\u6a21\u7cca\u6642','\u5728\u5fd9\u4e82\u4e4b\u4e2d','\u5728\u591c\u88e1\u6d41\u6dda\u6642','\u7576\u4f60\u7b49\u5019\u7b54\u6848\u6642','\u5728\u9806\u5229\u4e4b\u65e5','\u5728\u53d7\u632b\u4e4b\u6642','\u7576\u4f60\u7368\u81ea\u4e00\u4eba\u6642'];\r\n const C=['\u7942\u5fc5\u4ee5\u529b\u91cf\u6276\u6301\u4f60','\u7942\u4ecd\u89aa\u81ea\u770b\u9867\u4f60','\u7942\u5fc5\u70ba\u4f60\u722d\u6230','\u7942\u8981\u7528\u5e73\u5b89\u5145\u6eff\u4f60','\u7942\u8981\u727d\u8457\u4f60\u524d\u884c','\u7942\u628a\u65b0\u6b4c\u653e\u5728\u4f60\u53e3\u4e2d','\u7942\u6703\u958b\u90a3\u8a72\u958b\u7684\u9580','\u7942\u7528\u7b11\u5bb9\u56de\u61c9\u4f60\u7684\u79b1\u544a','\u7942\u4f7f\u4f60\u91cd\u65b0\u5f97\u529b','\u7942\u6703\u8cdc\u4e0b\u5408\u5b9c\u7684\u5e6b\u52a9'];\r\n const gen=[];\r\n for(const p of P){ for(const a of A){ for(const t of T){ gen.push(`${p}${a}${t}\u3002`); } } }\r\n for(const a of A){ gen.push(`\u9858\u4e3b${a}\u3002`); }\r\n for(const s of S){ for(const c of C){ gen.push(`${s}\uff0c${c}\u3002`);} }\r\n const seen=new Set(out); gen.sort((a,b)=>a.length-b.length);\r\n for(const s of gen){ if(out.length>=target) break; if(!seen.has(s) && s.length<=28){ seen.add(s); out.push(s);} }\r\n for(const s of gen){ if(out.length>=target) break; if(!seen.has(s)){ seen.add(s); out.push(s);} }\r\n for(let i=out.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [out[i],out[j]]=[out[j],out[i]]; }\r\n return out.slice(0,target);\r\n}\r\nconst builtinPhrases = buildBuiltin300(baseCurated);\r\n\r\n\/\/ ====== \u8056\u7d93\u91d1\u53e5\uff08\u6309\u4e3b\u984c\uff09 ======\r\nconst verses = {\r\n hope: { list: [\r\n '\u300c\u4f60\u7684\u8a71\u662f\u6211\u8173\u524d\u7684\u71c8\uff0c\u662f\u6211\u8def\u4e0a\u7684\u5149\u3002\u300d\uff08\u8a69119:105\uff09',\r\n '\u300c\u9ed1\u591c\u96d6\u7136\u6709\u54ed\u6ce3\uff0c\u65e9\u6668\u4fbf\u5fc5\u6b61\u547c\u3002\u300d\uff08\u8a6930:5\uff09',\r\n '\u300c\u76fc\u671b\u4e0d\u81f3\u65bc\u7f9e\u6065\u3002\u300d\uff08\u7f855:5\uff09'\r\n ]},\r\n comfort: { list: [\r\n '\u300c\u4e3b\u89aa\u81ea\u5b89\u6170\u4f60\uff0c\u64e6\u53bb\u773c\u6dda\u3002\u300d\uff08\u555f21:4 \u6982\u610f\uff09',\r\n '\u300c\u7942\u9760\u8fd1\u50b7\u5fc3\u7684\u4eba\u3002\u300d\uff08\u8a6934:18 \u6982\u610f\uff09',\r\n '\u300c\u8cdc\u4e0b\u51fa\u4eba\u610f\u5916\u7684\u5e73\u5b89\u3002\u300d\uff08\u81534:7 \u6982\u610f\uff09'\r\n ]},\r\n healing: { list: [\r\n '\u300c\u6211\u662f\u91ab\u6cbb\u4f60\u7684\u8036\u548c\u83ef\u3002\u300d\uff08\u51fa15:26 \u6982\u610f\uff09',\r\n '\u300c\u4e3b\u91ab\u6cbb\u50b7\u5fc3\u7684\u4eba\uff0c\u88f9\u597d\u4ed6\u5011\u7684\u50b7\u8655\u3002\u300d\uff08\u8a69147:3 \u6982\u610f\uff09'\r\n ]},\r\n peace: { list: [\r\n '\u300c\u6211\u7559\u4e0b\u5e73\u5b89\u7d66\u4f60\u5011\u3002\u300d\uff08\u7d0414:27\uff09',\r\n '\u300c\u9858\u4e3b\u8cdc\u4f60\u5011\u5e38\u5e38\u5e73\u5b89\u3002\u300d\uff08\u5e16\u5f8c3:16\uff09'\r\n ]},\r\n joy: { list: [\r\n '\u300c\u4e3b\u7684\u559c\u6a02\u662f\u4f60\u5011\u7684\u529b\u91cf\u3002\u300d\uff08\u5c3c8:10\uff09',\r\n '\u300c\u4f60\u5011\u8981\u5e38\u5e38\u559c\u6a02\u3002\u300d\uff08\u5e16\u524d5:16\uff09'\r\n ]},\r\n strength: { list: [\r\n '\u300c\u6211\u9760\u8457\u90a3\u52a0\u7d66\u6211\u529b\u91cf\u7684\uff0c\u51e1\u4e8b\u90fd\u80fd\u505a\u3002\u300d\uff08\u81534:13\uff09',\r\n '\u300c\u8036\u548c\u83ef\u662f\u6211\u7684\u529b\u91cf\u3002\u300d\uff08\u8a6928:7 \u6982\u610f\uff09'\r\n ]},\r\n provision: { list: [\r\n '\u300c\u6211\u7684\u795e\u5fc5\u7167\u7942\u7684\u8c50\u5bcc\uff0c\u5728\u57fa\u7763\u88e1\uff0c\u4f7f\u4f60\u5011\u4e00\u5207\u6240\u9700\u7528\u7684\u90fd\u5145\u8db3\u3002\u300d\uff08\u81534:19\uff09',\r\n '\u300c\u8036\u548c\u83ef\u662f\u6211\u7684\u7267\u8005\uff0c\u6211\u5fc5\u4e0d\u81f3\u7f3a\u4e4f\u3002\u300d\uff08\u8a6923:1\uff09'\r\n ]},\r\n guidance: { list: [\r\n '\u300c\u7942\u5fc5\u6307\u6559\u4f60\u7576\u884c\u7684\u8def\u3002\u300d\uff08\u8a6932:8 \u6982\u610f\uff09',\r\n '\u300c\u5728\u4f60\u4e00\u5207\u6240\u884c\u7684\u4e8b\u4e0a\u90fd\u8981\u8a8d\u5b9a\u7942\uff0c\u7942\u5fc5\u6307\u5f15\u4f60\u7684\u8def\u3002\u300d\uff08\u7bb43:6\uff09'\r\n ]}\r\n};\r\nfunction getBibleList(topic){\r\n const t = verses[topic] || verses['hope'];\r\n return t.list.slice();\r\n}\r\n\r\n\/\/ LocalStorage for custom\r\nconst LS_CUSTOM='bless_drawer_custom_v3';\r\nfunction loadCustom(){ try{const raw=localStorage.getItem(LS_CUSTOM);return raw? JSON.parse(raw): [];}catch(e){return [];} }\r\nfunction saveCustom(list){ localStorage.setItem(LS_CUSTOM, JSON.stringify(list||[])); }\r\n\r\nlet customList = loadCustom();\r\nlet currentLib='builtin';\r\nlet pool=[]; let lastPhrase=''; let lastIdx=-1;\r\n\r\n\/\/ ====== \u80cc\u666f\u8207\u7e6a\u88fd ======\r\nfunction hsl(h,s,l){ return `hsl(${h} ${s}% ${l}%)`; }\r\nfunction pickThemeConf(name){\r\n const T={\r\n dawn:{type:'grad',colors:[[28,85,65],[44,90,62]],overlay:['soft']},\r\n grace:{type:'grad',colors:[[210,55,92],[230,55,86]],overlay:['soft']},\r\n sky:{type:'grad',colors:[[205,70,80],[220,70,68]],overlay:['soft']},\r\n peach:{type:'grad',colors:[[22,85,72],[8,70,64]],overlay:['soft']},\r\n mint:{type:'grad',colors:[[155,38,74],[165,40,62]],overlay:['soft']},\r\n ocean:{type:'grad',colors:[[205,60,70],[210,60,58]],overlay:['soft']},\r\n rose:{type:'grad',colors:[[350,65,72],[330,58,62]],overlay:['soft']},\r\n lavender:{type:'grad',colors:[[270,45,76],[280,48,64]],overlay:['soft']},\r\n amber:{type:'grad',colors:[[40,85,64],[28,75,54]],overlay:['soft']},\r\n emerald:{type:'grad',colors:[[150,45,58],[170,42,48]],overlay:['soft']},\r\n indigo:{type:'grad',colors:[[240,40,58],[260,40,48]],overlay:['soft']},\r\n slate:{type:'grad',colors:[[220,20,98],[220,20,92]],overlay:['soft']}\r\n }; return T[name]||T['dawn'];\r\n}\r\nfunction roundRect(ctx,x,y,w,h,r){ r=r||12; ctx.beginPath(); ctx.moveTo(x+r,y); ctx.arcTo(x+w,y,x+w,y+h,r); ctx.arcTo(x+w,y+h,x,y+h,r); ctx.arcTo(x,y+h,x,y,r); ctx.arcTo(x,y,x+w,y,r); ctx.closePath(); }\r\nfunction applyOverlay(type,w,h){\r\n if(type==='soft'){ ctx.fillStyle='rgba(255,255,255,.10)'; ctx.fillRect(0,0,w,h); }\r\n if(type==='glass'){ const pad=Math.min(w,h)*0.06; roundRect(ctx,pad,pad,w-pad*2,h-pad*2,18); ctx.fillStyle='rgba(255,255,255,.12)'; ctx.fill(); ctx.strokeStyle='rgba(255,255,255,.24)'; ctx.stroke(); }\r\n if(type==='glow'){ const g=ctx.createRadialGradient(w*0.5,h*0.3,10,w*0.5,h*0.3,Math.max(w,h)*0.7); g.addColorStop(0,'rgba(255,255,255,.28)'); g.addColorStop(1,'rgba(255,255,255,0)'); ctx.fillStyle=g; ctx.fillRect(0,0,w,h); }\r\n if(type==='grain'){ const n=Math.floor((w*h)\/7000); ctx.save(); ctx.globalAlpha=.07; ctx.fillStyle='#000'; for(let i=0;i<n;i++){ const x=Math.random()*w, y=Math.random()*h, s=Math.random()*2+1; ctx.fillRect(x,y,s,s); } ctx.restore(); }\r\n}\r\n\r\n\/\/ \u2014\u2014 \u7279\u8272\u98a8\u683c \u2014\u2014 \/\/\r\nfunction applyStyle(kind,intensity,w,h,conf){ if(!kind || kind==='none') return; const k=intensity||'normal'; const a = {subtle:0.06, normal:0.12, vivid:0.2}[k] || 0.12; switch(kind){ case 'sunburst': return drawSunburst(w,h,a); case 'blobs': return drawBlobs(w,h,a); case 'memphis': return drawMemphis(w,h,a); case 'waves2': return drawWaves2(w,h,a); case 'lowpoly': return drawLowpoly(w,h,a); case 'rings': return drawRings(w,h,a); case 'halftone': return drawHalftone(w,h,a); case 'gridwarp': return drawGridWarp(w,h,a); case 'confetti': return drawConfetti(w,h,a); case 'brush': return drawBrush(w,h,a); case 'chevron': return drawChevron(w,h,a); case 'checker': return drawChecker(w,h,a); case 'rainbow': return drawRainbow(w,h,a); case 'papertop': return drawPaperTop(w,h,a); }}\r\nfunction rnd(min,max){ return Math.random()*(max-min)+min; }\r\nfunction drawSunburst(w,h,a){ ctx.save(); ctx.translate(w\/2,h\/2); const rays=28; for(let i=0;i<rays;i++){ ctx.rotate(Math.PI*2\/rays); const g=ctx.createLinearGradient(0,0,Math.max(w,h),0); g.addColorStop(0,`rgba(255,255,255,${0.8*a})`); g.addColorStop(1,'rgba(255,255,255,0)'); ctx.fillStyle=g; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(w*0.06,-Math.max(w,h)); ctx.lineTo(-w*0.06,-Math.max(w,h)); ctx.closePath(); ctx.fill(); } ctx.restore(); }\r\nfunction drawBlobs(w,h,a){ ctx.save(); ctx.globalAlpha=a; for(let i=0;i<6;i++){ const r=rnd(Math.min(w,h)*0.18, Math.min(w,h)*0.36); const x=rnd(0,w), y=rnd(0,h); const g=ctx.createRadialGradient(x,y,0,x,y,r); g.addColorStop(0,'rgba(255,255,255,0.9)'); g.addColorStop(1,'rgba(255,255,255,0)'); ctx.fillStyle=g; ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2); ctx.fill(); } ctx.restore(); }\r\nfunction drawMemphis(w,h,a){ ctx.save(); const n=14; for(let i=0;i<n;i++){ ctx.globalAlpha=a; const shape=i%4; const x=rnd(0,w), y=rnd(0,h); const s=rnd(24,80); ctx.fillStyle='rgba(255,255,255,.88)'; ctx.strokeStyle='rgba(255,255,255,.6)'; ctx.lineWidth=2; if(shape===0){ ctx.beginPath(); ctx.arc(x,y,s,0,Math.PI*2); ctx.fill(); } else if(shape===1){ ctx.beginPath(); ctx.rect(x,y,s*1.3,s*0.9); ctx.fill(); } else if(shape===2){ ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x+s,y); ctx.lineTo(x+s\/2,y-s); ctx.closePath(); ctx.fill(); } else { ctx.beginPath(); for(let t=0;t<12;t++){ const px=x+t*8, py=y+Math.sin(t\/2)*6; if(t===0) ctx.moveTo(px,py); else ctx.lineTo(px,py);} ctx.stroke(); } } ctx.restore(); }\r\nfunction drawWaves2(w,h,a){ ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle='rgba(255,255,255,.9)'; ctx.lineWidth=2; const layers=4; for(let r=0;r<layers;r++){ ctx.beginPath(); const amp=14+r*6, freq=0.008+r*0.002, y0=h*0.2+r*(h\/(layers+2)); for(let x=0;x<=w;x+=8){ const y=y0+Math.sin(x*freq+r)*amp; ctx.lineTo(x,y);} ctx.stroke(); } ctx.restore(); }\r\nfunction drawLowpoly(w,h,a){ ctx.save(); const cols=12, rows=8; const dx=w\/cols, dy=h\/rows; for(let iy=0;iy<rows;iy++){ for(let ix=0;ix<cols;ix++){ const x=ix*dx, y=iy*dy; const jitter=4; const p=[[x+rnd(-jitter,jitter), y+rnd(-jitter,jitter)],[x+dx+rnd(-jitter,jitter), y+rnd(-jitter,jitter)],[x+rnd(-jitter,jitter), y+dy+rnd(-jitter,jitter)],[x+dx+rnd(-jitter,jitter), y+dy+rnd(-jitter,jitter)]]; const tris=[[p[0],p[1],p[2]],[p[1],p[2],p[3]]]; tris.forEach(tr=>{ ctx.beginPath(); ctx.moveTo(tr[0][0],tr[0][1]); ctx.lineTo(tr[1][0],tr[1][1]); ctx.lineTo(tr[2][0],tr[2][1]); ctx.closePath(); ctx.fillStyle=`rgba(255,255,255,${a*0.8*rnd(0.6,1)})`; ctx.fill(); }); } } ctx.restore(); }\r\nfunction drawRings(w,h,a){ ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle='rgba(255,255,255,.9)'; ctx.lineWidth=3; const cx=w\/2, cy=h\/2; const max=Math.hypot(w,h)\/2; for(let r=60; r<max; r+=60){ ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2); ctx.stroke(); } ctx.restore(); }\r\nfunction drawHalftone(w,h,a){ ctx.save(); const step=28; for(let y=step\/2;y<h;y+=step){ for(let x=step\/2;x<w;x+=step){ const d = (x\/w + y\/h)\/2; const r = 4 + d*6; ctx.globalAlpha=a*0.8; ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2); ctx.fillStyle='rgba(255,255,255,1)'; ctx.fill(); } } ctx.restore(); }\r\nfunction drawGridWarp(w,h,a){ ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle='rgba(255,255,255,.9)'; ctx.lineWidth=1.2; const rows=14, cols=10; for(let i=0;i<=rows;i++){ ctx.beginPath(); for(let x=0;x<=w;x+=w\/cols){ const t=i\/rows; const y=t*h + Math.sin((x\/w)*Math.PI*2 + t*2)*6; if(x===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);} ctx.stroke(); }\r\n for(let j=0;j<=cols;j++){ ctx.beginPath(); for(let y=0;y<=h;y+=h\/rows){ const t=j\/cols; const x=t*w + Math.sin((y\/h)*Math.PI*2 + t*2)*6; if(y===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);} ctx.stroke(); } ctx.restore(); }\r\nfunction drawConfetti(w,h,a){ ctx.save(); const n=80; for(let i=0;i<n;i++){ ctx.globalAlpha=a*rnd(0.6,1); const x=rnd(0,w), y=rnd(0,h); const s=rnd(6,18); const rot=rnd(0,Math.PI); ctx.save(); ctx.translate(x,y); ctx.rotate(rot); ctx.fillStyle='rgba(255,255,255,.95)'; if(Math.random()<0.5){ ctx.fillRect(-s\/2,-s\/2,s,s*0.6);} else { ctx.beginPath(); ctx.moveTo(0,-s\/2); ctx.lineTo(s\/2,s\/2); ctx.lineTo(-s\/2,s\/2); ctx.closePath(); ctx.fill(); } ctx.restore(); } ctx.restore(); }\r\nfunction drawBrush(w,h,a){ ctx.save(); const strokes=8; for(let i=0;i<strokes;i++){ ctx.globalAlpha=a*0.9; const x=rnd(0,w*0.6), y=rnd(0,h); const wth=rnd(120,240), hth=rnd(20,46); ctx.translate(x,y); ctx.rotate(rnd(-0.3,0.3)); const g=ctx.createLinearGradient(0,0,wth,0); g.addColorStop(0,'rgba(255,255,255,.85)'); g.addColorStop(1,'rgba(255,255,255,0)'); ctx.fillStyle=g; ctx.fillRect(0,-hth\/2,wth,hth); ctx.setTransform(1,0,0,1,0,0); } ctx.restore(); }\r\nfunction drawChevron(w,h,a){ ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle='rgba(255,255,255,.9)'; ctx.lineWidth=4; const gap=60; for(let y=gap; y<h; y+=gap){ ctx.beginPath(); for(let x=-gap; x<w+gap; x+=gap){ ctx.moveTo(x,y); ctx.lineTo(x+gap\/2,y-gap\/2); ctx.lineTo(x+gap,y); } ctx.stroke(); } ctx.restore(); }\r\nfunction drawChecker(w,h,a){ ctx.save(); const size=100; for(let y=0;y<h;y+=size){ for(let x=0;x<w;x+=size){ if(((x\/size)+(y\/size))%2===0){ ctx.fillStyle=`rgba(255,255,255,${a*0.6})`; ctx.fillRect(x,y,size,size); } } } ctx.restore(); }\r\nfunction drawRainbow(w,h,a){ ctx.save(); const g=ctx.createLinearGradient(0,0,w,h); const cols=['#ff6b6b','#feca57','#48dbfb','#1dd1a1','#5f27cd']; const step=1\/(cols.length-1); cols.forEach((c,i)=>g.addColorStop(i*step,c)); ctx.globalAlpha=a*0.4; ctx.fillStyle=g; ctx.fillRect(0,0,w,h); ctx.restore(); }\r\nfunction drawPaperTop(w,h,a){ ctx.save(); ctx.globalAlpha=a*1.2; ctx.fillStyle='rgba(255,255,255,1)'; ctx.beginPath(); ctx.moveTo(0,0); for(let x=0;x<=w;x+=40){ const y=20 + Math.sin(x*0.02)*10; ctx.lineTo(x,y);} ctx.lineTo(w,0); ctx.closePath(); ctx.fill(); ctx.restore(); }\r\n\r\n\/\/ ======== \u6587\u5b57\u6392\u7248\uff1a\u5c0a\u91cd\u63db\u884c \uff0b \u81ea\u52d5\u7e2e\u653e ========\r\n\/\/ \uff08\u8986\u84cb\u539f\u672c\u7684 wrapTextToLines \u8207 fitAndDrawText\uff09\r\nfunction wrapTextToLines(text, maxWidth, font) {\r\n ctx.font = font;\r\n const chars = [...text];\r\n const lines = [];\r\n let buf = '';\r\n for (const ch of chars) {\r\n const test = buf + ch;\r\n if (ctx.measureText(test).width > maxWidth && buf) {\r\n lines.push(buf);\r\n buf = ch;\r\n } else {\r\n buf = test;\r\n }\r\n }\r\n if (buf) lines.push(buf);\r\n return lines;\r\n}\r\n\r\nfunction fitAndDrawText(text, box, fontFamily, color, opts) {\r\n const { x, y, w, h } = box;\r\n const align = opts.align || 'center';\r\n const mode = opts.mode || 'auto';\r\n const fixedPx = opts.fixedPx || 64;\r\n const lhMul = opts.lh || 1.3;\r\n const ls = opts.ls || 0;\r\n\r\n const hasBreaks = \/\\r?\\n\/.test(text);\r\n const baseLines = hasBreaks\r\n ? text.split(\/\\r?\\n\/).map(s => s.trim()).filter(Boolean)\r\n : null;\r\n\r\n function canFit(px) {\r\n const font = `700 ${px}px ${fontFamily}`;\r\n let lines = baseLines\r\n ? baseLines\r\n : wrapTextToLines(text, w * 0.92, font);\r\n\r\n ctx.font = font;\r\n for (const ln of lines) {\r\n if (ctx.measureText(ln).width > w * 0.92) return { ok: false, lines };\r\n }\r\n const lh = Math.ceil(px * lhMul);\r\n const total = lines.length * lh;\r\n return { ok: total <= h * 0.9, lines, lh, px };\r\n }\r\n\r\n let bestPx, bestLines, bestLh;\r\n\r\n if (mode === 'fixed') {\r\n const t = canFit(fixedPx);\r\n bestPx = fixedPx;\r\n bestLines = (t.lines || baseLines || [text]);\r\n bestLh = Math.ceil(fixedPx * lhMul);\r\n } else {\r\n let lo = 14, hi = Math.floor(h * 0.22);\r\n while (lo <= hi) {\r\n const mid = Math.floor((lo + hi) \/ 2);\r\n const t = canFit(mid);\r\n if (t.ok) {\r\n bestPx = mid; bestLines = t.lines; bestLh = t.lh; lo = mid + 1;\r\n } else {\r\n hi = mid - 1;\r\n }\r\n }\r\n if (!bestPx) {\r\n const t = canFit(14);\r\n bestPx = 14; bestLines = t.lines || baseLines || [text]; bestLh = Math.ceil(14 * lhMul);\r\n }\r\n }\r\n\r\n ctx.save();\r\n ctx.textAlign = align;\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = 'rgba(0,0,0,.20)';\r\n ctx.shadowBlur = Math.max(4, Math.floor(bestPx \/ 16));\r\n ctx.shadowOffsetY = Math.max(2, Math.floor(bestPx \/ 24));\r\n ctx.fillStyle = color;\r\n ctx.font = `700 ${bestPx}px ${fontFamily}`;\r\n try { ctx.letterSpacing = ls + 'px'; } catch {}\r\n\r\n const totalH = bestLines.length * bestLh;\r\n let cx = align === 'left' ? x + (w * 0.04) : (align === 'right' ? x + w - (w * 0.04) : x + w \/ 2);\r\n let cy = y + (h - totalH) \/ 2 + bestLh \/ 2;\r\n for (const line of bestLines) {\r\n ctx.fillText(line, cx, cy);\r\n cy += bestLh;\r\n }\r\n ctx.restore();\r\n}\r\n\r\nfunction drawWatermark(text,w,h,baseColor){ if(!text) return; ctx.save(); ctx.textAlign='right'; ctx.textBaseline='bottom'; ctx.font=`600 ${Math.round(Math.max(w,h)*0.028)}px ${fontSel.value}`; const isLight=(baseColor==='#ffffff'); ctx.fillStyle=isLight? 'rgba(17,24,39,.82)':'rgba(255,255,255,.92)'; ctx.fillText(text,w-24,h-18); ctx.restore(); }\r\n\r\nfunction parseSize(v){ const [w,h]=v.split('x').map(n=>parseInt(n,10)); return {w,h}; }\r\n\r\nfunction drawBackground(w,h){\r\n ctx.clearRect(0,0,w,h);\r\n ctx.fillStyle='#fff';\r\n ctx.fillRect(0,0,w,h);\r\n\r\n \/\/ \u5982\u679c\u6709\u4e0a\u50b3\u80cc\u666f\u5716\uff0c\u5148\u756b\u5716\r\n if (userBG) {\r\n const blur = parseInt(bgBlurVal.value||'0',10);\r\n const dim = parseInt(bgDimVal.value||'0',10);\r\n const fit = bgFit.value; \/\/ cover \/ contain\r\n\r\n ctx.save();\r\n if (blur>0) ctx.filter = `blur(${blur}px)`;\r\n \/\/ \u8a08\u7b97\u7f6e\u5165\r\n const iw = userBG.naturalWidth, ih = userBG.naturalHeight;\r\n const cw = w, ch = h;\r\n let sx=0, sy=0, sw=iw, sh=ih, dx=0, dy=0, dw=cw, dh=ch;\r\n\r\n const ir = iw\/ih, cr = cw\/ch;\r\n if (fit==='cover'){\r\n if (ir>cr){ \/\/ \u592a\u5bec\r\n sh = ih; sw = ih*cr; sx = (iw - sw)\/2;\r\n } else {\r\n sw = iw; sh = iw\/cr; sy = (ih - sh)\/2;\r\n }\r\n } else { \/\/ contain\r\n if (ir>cr){ dh = cw\/ir; dy = (ch - dh)\/2; }\r\n else { dw = ch*ir; dx = (cw - dw)\/2; }\r\n }\r\n if (fit==='cover') ctx.drawImage(userBG, sx,sy,sw,sh, 0,0,cw,ch);\r\n else ctx.drawImage(userBG, 0,0,iw,ih, dx,dy,dw,dh);\r\n\r\n ctx.filter='none';\r\n if (dim>0){ ctx.fillStyle=`rgba(0,0,0,${dim\/100})`; ctx.fillRect(0,0,w,h); }\r\n ctx.restore();\r\n } else {\r\n \/\/ \u7121\u80cc\u666f\u5716\uff1a\u756b\u4e3b\u984c\u6f38\u5c64\r\n const conf=pickThemeConf(themeSel.value);\r\n if(conf.type==='grad'){\r\n const g=ctx.createLinearGradient(0,0,w,h); g.addColorStop(0,hsl(...conf.colors[0])); g.addColorStop(1,hsl(...conf.colors[1])); ctx.fillStyle=g; ctx.fillRect(0,0,w,h);\r\n }\r\n }\r\n\r\n \/\/ \u7d0b\u7406\u8207\u7279\u8272\r\n let ov = overlaySel.value;\r\n applyOverlay(ov,w,h);\r\n const inten = intensitySel.value;\r\n const style = styleSel.value;\r\n applyStyle(style,inten,w,h, null);\r\n}\r\n\r\nfunction currentTextColor(){\r\n const conf=pickThemeConf(themeSel.value);\r\n const avgL=(conf.colors[0][2]+conf.colors[1][2])\/2;\r\n if(textColorSel.value==='light') return '#ffffff';\r\n if(textColorSel.value==='dark') return '#111827';\r\n return (avgL>=55? '#111827':'#ffffff');\r\n}\r\n\r\nfunction render(phrase){\r\n const {w,h}=parseSize(sizeSel.value); cv.width=w; cv.height=h; drawBackground(w,h);\r\n const pad=Math.round(Math.min(w,h)*0.12); const box={x:pad,y:pad,w:w-pad*2,h:h-pad*2};\r\n const color=currentTextColor();\r\n const opts={\r\n align: alignSel.value,\r\n mode: fontModeSel.value,\r\n fixedPx: Math.max(12,parseInt(fixedPxInput.value||'64',10)),\r\n lh: Math.max(1, parseFloat(lhInput.value||'1.3')),\r\n ls: parseFloat(lsInput.value||'0')\r\n };\r\n fitAndDrawText(phrase,box,fontSel.value,color,opts);\r\n drawWatermark((wmInput.value||'').trim(),w,h,color);\r\n}\r\n\r\nfunction getActiveList(){\r\n if (currentLib==='custom' && customList.length>0) return customList;\r\n if (currentLib==='bible'){\r\n const topic = verseTopicSel.value || 'hope';\r\n return getBibleList(topic);\r\n }\r\n return (builtinPhrases.length? builtinPhrases : fallbackPhrases);\r\n}\r\nfunction refreshPool(){ const list=getActiveList(); pool=[...Array(list.length).keys()]; updateStat(); }\r\nfunction updateStat(){ const list=getActiveList(); const used=list.length - pool.length; statInfo.textContent=`\u5df2\u62bd ${Math.max(0,used)} \/ ${list.length}`; libCount.textContent=String(list.length); }\r\nfunction ensurePhrase(){ const list=getActiveList(); lastPhrase=(list && list.length? list[0]: (fallbackPhrases[0]||'\u4e3b\u611b\u4f60\uff0c\u4eca\u5929\u4e5f\u8207\u4f60\u540c\u5728\u3002')); lastIdx=0; editText.value=lastPhrase; charCount.textContent=String(lastPhrase.length); render(lastPhrase); }\r\n\r\nfunction drawRandom(){\r\n let list=getActiveList(); if(!list || !list.length){ list=fallbackPhrases; }\r\n if(noRepeat.checked){\r\n if(pool.length===0) pool=[...Array(list.length).keys()];\r\n const r=Math.floor(Math.random()*pool.length);\r\n const idx=pool.splice(r,1)[0];\r\n lastIdx=idx; lastPhrase=list[idx];\r\n } else {\r\n let idx=Math.floor(Math.random()*list.length);\r\n if(list.length>1 && idx===lastIdx) idx=(idx+1)%list.length;\r\n lastIdx=idx; lastPhrase=list[idx];\r\n }\r\n editText.value=lastPhrase;\r\n charCount.textContent=String(lastPhrase.length);\r\n updateStat();\r\n render(lastPhrase);\r\n}\r\n\r\nfunction downloadCurrent(filename){ const name=filename||`bless_${sizeSel.value}.png`; cv.toBlob(b=>{ const a=document.createElement('a'); a.href=URL.createObjectURL(b); a.download=name; a.click(); setTimeout(()=>URL.revokeObjectURL(a.href), 1200); }); }\r\nfunction downloadAllThree(){ const sizes=['1080x1080','1080x1920','1920x1080']; const saved=sizeSel.value; const phrase=lastPhrase||getActiveList()[0]||fallbackPhrases[0]; (async()=>{ for(const s of sizes){ sizeSel.value=s; render(phrase); await new Promise(r=>setTimeout(r,60)); downloadCurrent(`bless_${s}.png`); await new Promise(r=>setTimeout(r,80)); } sizeSel.value=saved; render(phrase); })(); }\r\nfunction shareCurrent(){ cv.toBlob(async blob=>{ if(!blob){ downloadCurrent(); return;} const file=new File([blob],`bless_${sizeSel.value}.png`,{type:'image\/png'}); if(navigator.share && navigator.canShare && navigator.canShare({files:[file]})){ try{ await navigator.share({files:[file],title:'\u795d\u798f\u5c0f\u5361'});}catch(e){} } else { downloadCurrent(); } }); }\r\nfunction toast(msg){ const el=document.createElement('div'); el.textContent=msg; el.style.cssText='position:fixed;left:50%;top:14px;transform:translateX(-50%);background:#111827;color:#f8fafc;border:1px solid #0ea5e9;padding:8px 12px;border-radius:10px;z-index:9999;box-shadow:0 8px 30px rgba(0,0,0,.25);font-weight:700'; document.body.appendChild(el); setTimeout(()=>el.remove(),1400); }\r\n\r\n\/\/ ====== \u4e8b\u4ef6 ======\r\n['sizeSel','fontSel','themeSel','overlaySel','textColorSel','styleSel','intensitySel',\r\n 'fontModeSel','fixedPx','alignSel','lsInput','lhInput'\r\n].forEach(id=>{ const el=$(id); el.addEventListener('change', ()=>{ if(!lastPhrase) ensurePhrase(); else render(lastPhrase); }); el.addEventListener('input', ()=>{ if(!lastPhrase) ensurePhrase(); else render(lastPhrase); }); });\r\n\r\nwmInput.addEventListener('input', ()=>{ if(lastPhrase) render(lastPhrase); });\r\nnoRepeat.addEventListener('change',()=>{ refreshPool(); });\r\nautoNewBg.addEventListener('change',()=>{ \/* \u9810\u7559\uff1a\u82e5\u8981\u6bcf\u6b21\u81ea\u52d5\u63db\u98a8\u683c *\/ });\r\n\r\nlibSel.addEventListener('change',()=>{\r\n currentLib=libSel.value;\r\n customBox.style.display=(currentLib==='custom')? '':'none';\r\n bibleBox.style.display=(currentLib==='bible')? '':'';\r\n refreshPool(); ensurePhrase();\r\n});\r\nverseTopicSel.addEventListener('change',()=>{ if(currentLib==='bible'){ refreshPool(); ensurePhrase(); }});\r\n\r\ncustomArea.addEventListener('input',()=>{ const lines=customArea.value.split(\/\\n+\/).map(s=>s.trim()).filter(Boolean); customList=lines; saveCustom(customList); refreshPool(); \/* \u4e0d\u81ea\u52d5\u8986\u84cb\u756b\u9762 *\/ });\r\nimportSample.addEventListener('click',()=>{ const sample=[\r\n '\u4eca\u5929\u4e5f\u8981\u88ab\u611b\u5305\u570d\u3002','\u653e\u4e0b\u64d4\u6182\uff0c\u63a5\u4f4f\u5e73\u5b89\u3002','\u4f60\u88ab\u770b\u898b\uff0c\u4e5f\u88ab\u73cd\u60dc\u3002','\u9858\u597d\u6d88\u606f\u81e8\u5230\u4f60\u3002','\u7942\u727d\u8457\u4f60\u8d70\u904e\u4eca\u5929\u3002','\u5fc3\u88e1\u6709\u5149\uff0c\u8173\u4e0b\u6709\u8def\u3002','\u7b11\u8457\u9762\u5c0d\uff0c\u6069\u5178\u76f8\u96a8\u3002','\u4e3b\u5df2\u9810\u5099\uff0c\u4f60\u8981\u653e\u5fc3\u3002','\u8edf\u5f31\u6642\u66f4\u9760\u8fd1\u7942\u3002','\u51e1\u4e8b\u611f\u6069\uff0c\u559c\u6a02\u52a0\u500d\u3002','\u8010\u5fc3\u7b49\u5019\uff0c\u7f8e\u597d\u6b63\u4f86\u3002','\u9858\u75b2\u618a\u5f97\u5b89\u606f\u3002','\u9858\u50b7\u5fc3\u88ab\u5b89\u6170\u3002','\u9858\u7126\u616e\u5f97\u5be7\u975c\u3002','\u9858\u8ff7\u60d8\u5f97\u65b9\u5411\u3002','\u9858\u5b64\u55ae\u5f97\u64c1\u62b1\u3002','\u9858\u5bb6\u5ead\u6709\u5408\u4e00\u3002','\u9858\u5de5\u4f5c\u6709\u7a81\u7834\u3002','\u9858\u8eab\u9ad4\u5f97\u525b\u5f37\u3002','\u9858\u9748\u88e1\u66f4\u706b\u71b1\u3002',\r\n]; customList=sample; customArea.value=sample.join('\\n'); saveCustom(customList); refreshPool(); });\r\nclearCustom.addEventListener('click',()=>{ customList=[]; customArea.value=''; saveCustom(customList); refreshPool(); });\r\n\r\napplyNow.addEventListener('click',()=>{ const t=(editText.value||'').trim(); if(!t) return; lastPhrase=t; render(lastPhrase); });\r\nrevertText.addEventListener('click',()=>{ const list=getActiveList(); lastPhrase = list[lastIdx] || list[0] || '\u4e3b\u611b\u4f60\uff0c\u4eca\u5929\u4e5f\u8207\u4f60\u540c\u5728\u3002'; editText.value=lastPhrase; charCount.textContent=String(lastPhrase.length); render(lastPhrase); });\r\nsaveToCustom.addEventListener('click',()=>{ const t=(editText.value||'').trim(); if(!t) return toast('\u6c92\u6709\u5167\u5bb9\u53ef\u5132\u5b58'); if(!customList.includes(t)){ customList.push(t); saveCustom(customList); toast('\u5df2\u5b58\u5230\u81ea\u8a02\u8a5e\u5eab'); } else { toast('\u81ea\u8a02\u8a5e\u5eab\u5df2\u6709\u6b64\u53e5'); } });\r\n\r\neditText.addEventListener('input',()=>{ charCount.textContent=String((editText.value||'').length); });\r\n\r\ndrawBtn.addEventListener('click',drawRandom);\r\nredrawBtn.addEventListener('click',()=>{ if(!lastPhrase) ensurePhrase(); else render(lastPhrase); });\r\ndlBtn.addEventListener('click',()=>downloadCurrent());\r\ndlAllBtn.addEventListener('click',downloadAllThree);\r\nshareBtn.addEventListener('click',shareCurrent);\r\n\r\n\/\/ \u80cc\u666f\u6a94\u6848\r\nbgFile.addEventListener('change', (e)=>{\r\n const f=e.target.files && e.target.files[0]; if(!f) return;\r\n const img=new Image(); img.onload=()=>{ userBG=img; render(lastPhrase||''); }; img.src=URL.createObjectURL(f);\r\n});\r\nbgFit.addEventListener('change', ()=>{ if(lastPhrase) render(lastPhrase); });\r\nbgBlurVal.addEventListener('input', ()=>{ if(lastPhrase) render(lastPhrase); });\r\nbgDimVal.addEventListener('input', ()=>{ if(lastPhrase) render(lastPhrase); });\r\nclearBg.addEventListener('click', ()=>{ userBG=null; bgFile.value=''; render(lastPhrase||''); });\r\n\r\n\/\/ ====== \u521d\u59cb\u5316 ======\r\n(function init(){\r\n try{\r\n bibleBox.style.display='none';\r\n refreshPool();\r\n ensurePhrase();\r\n }catch(e){ console.error(e); toast('\u521d\u59cb\u5316\u6642\u767c\u751f\u932f\u8aa4\uff0c\u8acb\u91cd\u6574'); }\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\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>\u795d\u798f\u8a5e\u62bd\u7c64\u5668 v3\uff08\u767d\u7070\uff0b\u7279\u8272\u98a8\u683c\uff5c\u55ae\u6a94 HTML\uff09 \u795d\u798f\u8a5e\u62bd\u7c64\u5668\uff08\u5c0f\u904a\u6232\uff09 \u5c3a\u5bf8 1:1\uff081080\u00d71080 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-5234","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails","has-product-nav"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"jetpack_sharing_enabled":true,"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"Meiling","author_link":"https:\/\/meiling412.com\/zh\/author\/lin576688103gmail-com\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"\u795d\u798f\u8a5e\u62bd\u7c64\u5668 v3\uff08\u767d\u7070\uff0b\u7279\u8272\u98a8\u683c\uff5c\u55ae\u6a94 HTML\uff09 \u795d\u798f\u8a5e\u62bd\u7c64\u5668\uff08\u5c0f\u904a\u6232\uff09 \u5c3a\u5bf8 1:1\uff081080\u00d71080…","_links":{"self":[{"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/pages\/5234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/comments?post=5234"}],"version-history":[{"count":34,"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/pages\/5234\/revisions"}],"predecessor-version":[{"id":5272,"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/pages\/5234\/revisions\/5272"}],"wp:attachment":[{"href":"https:\/\/meiling412.com\/zh\/wp-json\/wp\/v2\/media?parent=5234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}