{"id":15,"date":"2010-11-29T00:54:48","date_gmt":"2010-11-29T08:54:48","guid":{"rendered":"http:\/\/www.sandcomp.com\/blog\/"},"modified":"2025-09-10T11:25:37","modified_gmt":"2025-09-10T18:25:37","slug":"sandphoto","status":"publish","type":"page","link":"https:\/\/www.sandcomp.com\/blog\/sandphoto\/","title":{"rendered":"\u8bc1\u4ef6\u7167\u7247\u6392\u7248\u5728\u7ebf\u751f\u6210\u5668 2.0"},"content":{"rendered":"\n<p>  <!-- HFCM by 99 Robots - Snippet # 4: sandphoto-js-scripts -->\n<script data-jetpack-boost=\"ignore\" type=\"text\/javascript\" src=\"https:\/\/www.sandcomp.com\/sandphoto-js\/phototypes.js?v=20250715\"><\/script>\r\n<script data-jetpack-boost=\"ignore\" type=\"text\/javascript\" src=\"https:\/\/www.sandcomp.com\/sandphoto-js\/sandphoto.js?v=20250715\"><\/script>\r\n<script data-jetpack-boost=\"ignore\" type=\"text\/javascript\" src=\"https:\/\/www.sandcomp.com\/sandphoto-js\/ui-generator.js?v=20250715\"><\/script>\r\n<script data-jetpack-boost=\"ignore\" type=\"text\/javascript\" src=\"https:\/\/www.sandcomp.com\/sandphoto-js\/app.js?v=20250715\"><\/script>\n<!-- \/end HFCM by 99 Robots -->\n <!-- HFCM by 99 Robots - Snippet # 1: sandphoto-js-zh -->\n<script data-jetpack-boost=\"ignore\">\r\n        \/\/ Set your language here (only one place)\r\n        const language = 'zh'; \/\/ Change to 'zh', 'es', etc. as needed\r\n\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            \/\/ Get the config for the selected language\r\n            const langConfig = UIGenerator.getLanguageConfig(language);\r\n            const uiConfig = {\r\n                ...langConfig,\r\n                previewType: 'canvas'\r\n            };\r\n            const uiGenerator = new UIGenerator(uiConfig);\r\n\r\n            \/\/ Generate the complete form\r\n            const form = uiGenerator.generateCompleteForm('sandphoto-form');\r\n            const container = document.getElementById('sandphoto-form-container');\r\n            container.appendChild(form);\r\n\r\n            \/\/ Create app with main page configuration\r\n            const mainConfig = {\r\n                language: language,\r\n                elementIds: {\r\n                    uploadArea: 'uploadArea',\r\n                    photoInput: 'filename',\r\n                    targetTypeSelect: 'targetType',\r\n                    containerTypeSelect: 'containerType',\r\n                    bgColorSelect: 'bgColor', \/\/ Use dropdown\r\n                    previewSection: 'previewContainer',\r\n                    previewCanvas: 'previewCanvas',\r\n                    photoCount: 'count',\r\n                    downloadBtn: 'downloadBtn',\r\n                    customSizeGroup: 'customSizeSection',\r\n                    customSizeGroup2: null,\r\n                    customWidthInput: 'customWidth',\r\n                    customHeightInput: 'customHeight',\r\n                    photoCountSelect: 'photoCountSelect',\r\n                    customCountGroup: 'photoCountSection',\r\n                    customPhotoCountInput: 'customPhotoCount',\r\n\t\t\t\t\t\t\t\t\t  gapInputMm: 'gapMm',\r\n                    \/\/ Multi-photo elements\r\n                    singleUploadArea: 'singleUploadArea',\r\n                    multiUploadArea: 'multiUploadArea',\r\n                    multiFileInput: 'multiFilename',\r\n                    photoListContainer: 'photoListContainer',\r\n                    photoList: 'photoList',\r\n                    uploadModeRadios: 'uploadMode'\r\n                },\r\n                texts: langConfig.texts\r\n            };\r\n\r\n            new SandPhotoApp(mainConfig);\r\n        });\r\n<\/script>\n<!-- \/end HFCM by 99 Robots -->\n<!-- HFCM by 99 Robots - Snippet # 2: sandphoto-js style -->\n<style>\r\n\r\n.container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 20px;\r\n}\r\n\r\n.upload-section {\r\n    margin-bottom: 40px;\r\n}\r\n\r\n.upload-area {\r\n    border: 3px dashed #ddd;\r\n    border-radius: 15px;\r\n    padding: 60px 20px;\r\n    text-align: center;\r\n    transition: all 0.3s ease;\r\n    background: #fafafa;\r\n    cursor: pointer;\r\n}\r\n\r\n.upload-area:hover {\r\n    border-color: #667eea;\r\n    background: #f0f4ff;\r\n}\r\n\r\n.upload-area.dragover {\r\n    border-color: #667eea;\r\n    background: #e8f0ff;\r\n    transform: scale(1.02);\r\n}\r\n\r\n.upload-icon {\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.upload-content h3 {\r\n    margin-bottom: 10px;\r\n    color: #333;\r\n}\r\n\r\n.upload-content p {\r\n    color: #666;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.upload-btn {\r\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n    color: white;\r\n    border: none;\r\n    padding: 12px 30px;\r\n    border-radius: 25px;\r\n    font-size: 1rem;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\r\n}\r\n\r\n.upload-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);\r\n}\r\n\r\n.settings-section {\r\n    margin-bottom: 40px;\r\n}\r\n\r\n.settings-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n    gap: 20px;\r\n}\r\n\r\n.setting-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.setting-group label {\r\n    margin-bottom: 8px;\r\n    color: #333;\r\n}\r\n\r\n.form-control {\r\n    padding: 12px;\r\n    border: 2px solid #ddd;\r\n    border-radius: 8px;\r\n    transition: border-color 0.3s ease;\r\n    background: white;\r\n}\r\n\r\n.form-control:focus {\r\n    outline: none;\r\n    border-color: #667eea;\r\n    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\r\n}\r\n\r\n\/* Custom size input styling *\/\r\n#customSizeGroup,\r\n#customSizeGroup2,\r\n#customCountGroup {\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n#customSizeGroup.show,\r\n#customSizeGroup2.show,\r\n#customCountGroup.show {\r\n    animation: slideDown 0.3s ease;\r\n}\r\n\r\n@keyframes slideDown {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(-10px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n\/* Number input specific styling *\/\r\ninput[type=\"number\"].form-control {\r\n    -moz-appearance: textfield;\r\n}\r\n\r\ninput[type=\"number\"].form-control::-webkit-outer-spin-button,\r\ninput[type=\"number\"].form-control::-webkit-inner-spin-button {\r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n}\r\n\r\n.preview-section {\r\n    border-top: 2px solid #eee;\r\n    padding-top: 30px;\r\n}\r\n\r\n.preview-section h3 {\r\n    text-align: center;\r\n    margin-bottom: 20px;\r\n    color: #333;\r\n}\r\n\r\n.preview-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n#previewCanvas {\r\n    border: 2px solid #ddd;\r\n    border-radius: 10px;\r\n    max-width: 100%;\r\n    height: auto;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n}\r\n\r\n.preview-info {\r\n    text-align: center;\r\n}\r\n\r\n#photoCount {\r\n    margin-bottom: 15px;\r\n    color: #666;\r\n}\r\n\r\n#photoCount span {\r\n    font-weight: bold;\r\n    color: #667eea;\r\n}\r\n\r\n.download-btn {\r\n    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);\r\n    color: white;\r\n    border: none;\r\n    padding: 15px 40px;\r\n    border-radius: 25px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);\r\n}\r\n\r\n.download-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.6);\r\n}\r\n\r\n.download-btn:disabled {\r\n    background: #ccc;\r\n    cursor: not-allowed;\r\n    transform: none;\r\n    box-shadow: none;\r\n}\r\n\r\n\r\n\r\n\/* Loading animation *\/\r\n.loading {\r\n    display: inline-block;\r\n    width: 20px;\r\n    height: 20px;\r\n    border: 3px solid #f3f3f3;\r\n    border-top: 3px solid #667eea;\r\n    border-radius: 50%;\r\n    animation: spin 1s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n    0% { transform: rotate(0deg); }\r\n    100% { transform: rotate(360deg); }\r\n}\r\n\r\n\/* Responsive design *\/\r\n@media (max-width: 768px) {\r\n    .container {\r\n        padding: 10px;\r\n    }\r\n    \r\n    main {\r\n        padding: 20px;\r\n    }\r\n    \r\n    header h1 {\r\n    }\r\n    \r\n    .settings-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n    \r\n    .upload-area {\r\n        padding: 40px 20px;\r\n    }\r\n    \r\n    #previewCanvas {\r\n        width: 100%;\r\n        height: auto;\r\n    }\r\n} \r\n<\/style>\n<!-- \/end HFCM by 99 Robots -->\n<\/p>\n\n\n\n<p>[2025\u5e747\u670814\u65e5\u66f4\u65b0] \u65b0\u7248\u672c\u66f4\u65b0<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u7eaf\u5ba2\u6237\u7aef\u5b9e\u73b0 \u2014\u2014 \u4f60\u7684\u7167\u7247\u7edd\u4e0d\u4f1a\u79bb\u5f00\u4f60\u7684\u8bbe\u5907<\/strong>\uff01<\/li>\n\n\n\n<li>\u53ef\u4ee5\u9009\u62e9\u7167\u7247\u7684\u6570\u91cf\uff0c1\u5f20\u4e5f\u53ef\u4ee5\uff01<\/li>\n\n\n\n<li>\u5982\u679c\u9047\u5230\u95ee\u9898\u53ef\u4ee5\u4f7f\u7528<a href=\"https:\/\/www.sandcomp.com\/blog\/%e8%af%81%e4%bb%b6%e7%85%a7%e7%89%87%e6%8e%92%e7%89%88%e5%9c%a8%e7%ba%bf%e7%94%9f%e6%88%90%e5%99%a8%e6%97%a7%e7%89%88\/\">\u8001\u7248\u672c<\/a>\u5e76\u7559\u8a00\u53cd\u9988\uff0c\u8c22\u8c22\uff01&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>\u662f\u4e0d\u662f\u89c9\u5f97\u51b2\u5370\u8bc1\u4ef6\u7167\u7247\u7279\u522b\u8d35\uff1f \u6559\u4f60\u4e00\u4e2a\u7701\u94b1\u7684\u65b9\u6cd5\uff1a \u5728\u4e00\u5f206\u5bf8\u7684\u7167\u7247\u4e0a\u6392\u7248\u591a\u5f20\u8bc1\u4ef6\u7167\uff0c \u7136\u540e\u53ea\u8981\u82b1\u51e0\u89d2\u94b1\u5c31\u80fd\u6d17\u51fa\u4e00\u5806\u8bc1\u4ef6\u7167\u7247\u4e86\u3002<br>\u600e\u4e48\uff1f \u4e0d\u4f1a\u4f7f\u7528Photoshop\u6392\u7248\uff1f \u61d2\u5f97\u53bb\u6392\u7248\uff1f \u6ca1\u5173\u7cfb\uff0c \u6211\u4e5f\u662f\u61d2\u5f97\u6bcf\u6b21\u7528Photoshop\u6392\u7248\u4e86\uff0c \u5c31\u81ea\u5df1\u5199\u4e86\u4e2a\u7a0b\u5e8f\uff0c\u4f60\u6765\u8bd5\u7528\u4e00\u4e0b\u5427\uff01<\/p>\n\n\n\n<p>\u987a\u4fbf\u8bf4\u4e00\u4e0b\uff0c \u6211\u5df2\u7ecf\u5c06\u4ee3\u7801\u5f00\u6e90\u4e86\uff0c \u653e\u5728\u4e86<a href=\"https:\/\/github.com\/gmajian\/sandphoto-js\" target=\"_blank\" rel=\"noopener\" title=\"github\">github\u4e0a<\/a>\u4e86\u3002 \u611f\u5174\u8da3\u53ef\u4ee5\u770b\u4e00\u4e0b\u3002<\/p>\n\n\n\n<p class=\"p1\"><\/p>\n\n\n\n<div id=\"sandphoto-form-container\"><!-- Form will be generated here by JavaScript --><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>\u5982\u679c\u5927\u5bb6\u6709\u4ec0\u4e48\u5efa\u8bae\uff0c\u8bf7\u7559\u8a00\u3002 \u4e5f\u6b22\u8fce\u5e2e\u52a9\u5ba3\u4f20\u672c\u7ad9\u3002 \u672c\u7ad9\u7684\u5730\u5740\u662f\uff1a<a href=\"https:\/\/www.sandcomp.com\/blog\/sandphoto\/\">https:\/\/www.sandcomp.com\/blog\/sandphoto\/<\/a><\/p>\n\n\n\n<div class=\"wp-block-jetpack-donations\"><h4>\u5355\u6b21\u6350\u8d60<\/h4><p>\u611f\u8c22\u60a8\u7684\u8d21\u732e\u3002<\/p><a class=\"jetpack-donations-fallback-link\" rel=\"noopener noreferrer noamphtml\" target=\"_blank\">\u6350\u8d60<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>[2025\u5e747\u670814\u65e5\u66f4\u65b0] \u65b0\u7248\u672c\u66f4\u65b0 \u662f\u4e0d\u662f\u89c9\u5f97\u51b2\u5370\u8bc1\u4ef6\u7167\u7247\u7279\u522b\u8d35\uff1f \u6559\u4f60\u4e00 &hellip; <a href=\"https:\/\/www.sandcomp.com\/blog\/sandphoto\/\">\u7ee7\u7eed\u9605\u8bfb <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sandcomp.com\/blog\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sandcomp.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sandcomp.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sandcomp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sandcomp.com\/blog\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":109,"href":"https:\/\/www.sandcomp.com\/blog\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":1079,"href":"https:\/\/www.sandcomp.com\/blog\/wp-json\/wp\/v2\/pages\/15\/revisions\/1079"}],"wp:attachment":[{"href":"https:\/\/www.sandcomp.com\/blog\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}