// ========================= // 动态注入 CSS // ========================= const style = document.createElement('style'); style.textContent = ` /* 弹窗全屏遮罩 */ .pane-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 99999; } .pane-modal-content { background: #fff; padding: 50px; border-radius: 4px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 15px; max-width: 95vw; max-height: 95vh; overflow: auto; } .pane-close-btn { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #333; line-height: 1; } /* 贺卡主容器：固定尺寸保证导出一致 */ .postcard-wrapper { position: relative; width: 1000px; height: 650px; } .postcard-bg { width: 100%; height: 100%; object-fit: cover; display: block; } .postcard-text-overlay .wish-title{ color:#6f7e30; } /* 文字区域 */ .postcard-text-overlay { position: absolute; top: 55%; left: 48%; width: 45%; transform: translateY(-50%); font-family: "Libre Baskerville", serif; color: #4a5d37; text-align: left; } .wish-title { font-size: 28px; font-style: italic; margin-bottom: 15px; font-weight: normal; } .wish-content { font-size: 18px; font-style: italic; line-height: 1.6; letter-spacing: 0.5px; white-space: pre-wrap; word-break: break-word; margin: 0; } @media(max-width:700px){ .wish-title{ font-size: 10px !important; } .wish-content{ font-size: 5px !important; } .postcard-text-overlay { top: 45% !important; } } /* 下载按钮 */ .pane-download-btn { padding: 10px 26px; background-color: #707e30; color: #fff; border: none; cursor: pointer; font-size: 14px; font-weight: 500; letter-spacing: 0.5px; transition: opacity 0.2s ease; } .pane-download-btn:hover { opacity: 0.9; } /* 移动端适配：仅用于屏幕预览 */ @media (max-width: 1024px) { .postcard-wrapper { width: 90vw; height: calc(90vw * 0.65); } .postcard-text-overlay { top: 40%; left: 48%; width: 42%; } .wish-title { font-size: 20px; } .wish-content { font-size: 14px; } } `; document.head.appendChild(style); document.addEventListener('DOMContentLoaded', async function () { // 动态加载 html2canvas async function loadHtml2Canvas() { if (window.html2canvas) return; return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'; script.onload = resolve; script.onerror = reject; document.head.appendChild(script); }); } await loadHtml2Canvas(); // ⚠️ 插件输入框选择器 const PLUGIN_INPUT_SELECTOR = '#Wish-List'; const STORAGE_KEY = 'pane_summer_wish'; // ========================= // 动态创建 HTML // ========================= // 下载按钮 const inlineDownloadBtn = document.createElement('button'); inlineDownloadBtn.type = 'button'; inlineDownloadBtn.id = 'inlineDownloadBtn'; inlineDownloadBtn.className = 'pane-download-btn'; inlineDownloadBtn.style.display = 'none'; inlineDownloadBtn.style.margin = '20px auto'; inlineDownloadBtn.textContent = 'Download My Postcard'; // Modal const modal = document.createElement('div'); modal.id = 'downloadModal'; modal.className = 'pane-modal'; modal.style.display = 'none'; modal.innerHTML = ` `; document.body.appendChild(modal); const formSubmitDiv = document.querySelector('.form_submit_div'); if (formSubmitDiv) { formSubmitDiv.insertAdjacentElement('afterend', inlineDownloadBtn); } else { document.body.appendChild(inlineDownloadBtn); } // ========================= // 获取元素 // ========================= const dynamicText = document.getElementById('dynamicWishText'); const closeBtn = document.querySelector('.pane-close-btn'); const postcard = document.getElementById('postcardTemplate'); const modalDownloadBtn = document.getElementById('modalDownloadBtn'); // ========================= // 提交监听 // ========================= function handleFormSuccess() { const pluginInput = document.querySelector(PLUGIN_INPUT_SELECTOR); if (!pluginInput) return; const userText = pluginInput.value.trim(); if (!userText) return; localStorage.setItem(STORAGE_KEY, userText); dynamicText.textContent = userText; modal.style.display = 'flex'; inlineDownloadBtn.style.display = 'block'; console.log('hulkapps 提交成功'); } let hulkappsTriggered = false; // fetch监听 const originalFetch = window.fetch; window.fetch = async function (...args) { const response = await originalFetch.apply(this, args); try { const url = typeof args[0] === 'string' ? args[0] : args[0]?.url || ''; if (!hulkappsTriggered && url.includes('formresponse')) { if (response.status === 200) { hulkappsTriggered = true; handleFormSuccess(); } } } catch (err) { console.error('❌ fetch 监听错误:', err); } return response; }; // XMLHttpRequest监听 const originalOpen = XMLHttpRequest.prototype.open; const originalSend = XMLHttpRequest.prototype.send; window.XMLHttpRequest.prototype.open = function (method, url, ...rest) { this._requestUrl = url; return originalOpen.call(this, method, url, ...rest); }; window.XMLHttpRequest.prototype.send = function (...args) { this.addEventListener('readystatechange', function () { if (this.readyState === 4) { if (!hulkappsTriggered && this._requestUrl && this._requestUrl.includes('formresponse')) { if (this.status === 200) { hulkappsTriggered = true; handleFormSuccess(); } } } }); return originalSend.call(this, ...args); }; // ========================= // 初始化缓存 // ========================= const savedWish = localStorage.getItem(STORAGE_KEY); if (savedWish) { const pluginInput = document.querySelector(PLUGIN_INPUT_SELECTOR); if (pluginInput) { pluginInput.value = savedWish; } dynamicText.textContent = savedWish; inlineDownloadBtn.style.display = 'block'; } // ========================= // 优化后的下载函数（核心修复） // ========================= function downloadPostcard() { // 1. 克隆一个节点用于在后台渲染，脱离屏幕媒体查询干扰 const clone = postcard.cloneNode(true); // 2. 强行应用 PC 端的标准样式，覆盖任何可能的移动端 CSS 影响 clone.style.position = 'fixed'; clone.style.top = '-9999px'; clone.style.left = '-9999px'; clone.style.width = '1000px'; clone.style.height = '650px'; clone.style.transform = 'none'; // 强行修正克隆节点内部元素的样式，确保完全一致 const cloneTitle = clone.querySelector('.wish-title'); const cloneContent = clone.querySelector('.wish-content'); const cloneOverlay = clone.querySelector('.postcard-text-overlay'); if (cloneTitle) cloneTitle.style.setProperty('font-size', '28px', 'important'); if (cloneContent) cloneContent.style.setProperty('font-size', '18px', 'important'); if (cloneOverlay) { cloneOverlay.style.setProperty('top', '55%', 'important'); cloneOverlay.style.setProperty('width', '45%', 'important'); } document.body.appendChild(clone); // 3. 确保克隆节点内的图片完全加载后再进行截图 const cloneImg = clone.querySelector('.postcard-bg'); function proceedToCanvas() { // scale: 3 提供 3倍的高清视网膜分辨率，确保手机端下载也绝对清晰 html2canvas(clone, { scale: 3, useCORS: true, allowTaint: false, width: 1000, height: 650 }).then(canvas => { const imgData = canvas.toDataURL('image/jpeg', 0.95); const downloadLink = document.createElement('a'); downloadLink.href = imgData; downloadLink.download = 'my-summer-wish.jpg'; document.body.appendChild(downloadLink); downloadLink.click(); // 释放内存 document.body.removeChild(downloadLink); document.body.removeChild(clone); }).catch(err => { console.error('Canvas generation failed:', err); document.body.removeChild(clone); }); } if (cloneImg && !cloneImg.complete) { cloneImg.onload = proceedToCanvas; cloneImg.onerror = () => { console.error('Image failed to load in clone'); proceedToCanvas(); }; } else { // 如果图片已缓存或加载完成，直接执行 setTimeout(proceedToCanvas, 100); } } // ========================= // 输入实时同步 // ========================= document.body.addEventListener('input', function (e) { if (e.target.matches(PLUGIN_INPUT_SELECTOR)) { const currentText = e.target.value; dynamicText.textContent = currentText; if (currentText.trim()) { localStorage.setItem(STORAGE_KEY, currentText); } else { localStorage.removeItem(STORAGE_KEY); inlineDownloadBtn.style.display = 'none'; } } }); // ========================= // 事件绑定 // ========================= modalDownloadBtn.addEventListener('click', downloadPostcard); inlineDownloadBtn.addEventListener('click', downloadPostcard); closeBtn.addEventListener('click', () => { modal.style.display = 'none'; }); });

My Summer Wishes

pane-stores

配送 送料無料

14日以内に返品

一流のサポート

便利で安全な支払い

配送送料無料