From c50d7829f75c890aa7d51162237c3982469be13d Mon Sep 17 00:00:00 2001 From: wood chen Date: Fri, 20 Jun 2025 16:35:37 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E4=B8=8B=E8=BD=BD=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E9=94=99=E8=AF=AF=E5=A4=84=E7=90=86=E5=92=8C=E8=B7=A8=E5=9F=9F?= =?UTF-8?q?=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ComponentToImg.js | 124 ++++++++++++++------- src/components/Themes/BackgroundTheme.js | 2 +- src/components/Themes/BasicTheme.js | 2 +- src/components/Themes/MobileMockupTheme.js | 2 +- src/components/Themes/ModernTheme.js | 2 +- src/components/Themes/OutlineTheme.js | 2 +- src/components/Themes/PreviewTheme.js | 2 +- src/components/Themes/StylishTheme.js | 2 +- 8 files changed, 88 insertions(+), 50 deletions(-) diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js index 62c49df..28a5789 100644 --- a/src/components/ComponentToImg.js +++ b/src/components/ComponentToImg.js @@ -12,68 +12,106 @@ const ComponentToImg = (props) => { const { unsplashImage } = useContext(ImgContext); const componentRef = React.createRef(); - - - async function saveImage(data) { - var a = document.createElement("A"); - a.href = data; - a.download = `cover.png`; - document.body.appendChild(a); - setLoading(false) - - a.click(); - document.body.removeChild(a); - } - - const downloadImage = async () => { - // exportComponentAsPNG(componentRef, 'cover') - setLoading(true) - - const element = componentRef.current; - - // console.log(element) - // console.log(element.offsetHeight) - - let data = await domtoimage.toPng(componentRef.current, { - height: element.offsetHeight * 2, - width: element.offsetWidth * 2, - style: { - transform: "scale(" + 2 + ")", - transformOrigin: "top left", - width: element.offsetWidth + "px", - height: element.offsetHeight + "px", - } - }) - - // console.log(data) - await saveImage(data); - - - if (unsplashImage) { - unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, }); + try { + var a = document.createElement("A"); + a.href = data; + a.download = `cover.png`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + } catch (error) { + console.error('保存图片失败:', error); + alert('下载失败，请重试'); + } finally { + setLoading(false); } } + const downloadImage = async () => { + try { + setLoading(true); + + const element = componentRef.current; + + if (!element) { + throw new Error('无法找到要下载的元素'); + } + + // 等待所有图片加载完成 + const images = element.querySelectorAll('img'); + await Promise.all(Array.from(images).map(img => { + if (img.complete) return Promise.resolve(); + return new Promise((resolve, reject) => { + img.onload = resolve; + img.onerror = () => { + console.warn('图片加载失败:', img.src); + resolve(); // 即使图片加载失败也继续 + }; + // 设置超时 + setTimeout(resolve, 5000); + }); + })); + + // 简化配置，只使用基本选项 + const data = await domtoimage.toPng(componentRef.current, { + height: element.offsetHeight * 2, + width: element.offsetWidth * 2, + style: { + transform: "scale(" + 2 + ")", + transformOrigin: "top left", + width: element.offsetWidth + "px", + height: element.offsetHeight + "px", + } + }); + + await saveImage(data); + + // 跟踪 Unsplash 下载 + if (unsplashImage && unsplashImage.downloadLink) { + try { + await unsplash.photos.trackDownload({ + downloadLocation: unsplashImage.downloadLink + }); + } catch (trackError) { + console.warn('跟踪下载失败:', trackError); + // 不影响主要功能，只是记录警告 + } + } + + } catch (error) { + console.error('下载图片时出错:', error); + setLoading(false); + + // 提供更友好的错误信息 + if (error.message.includes('CORS') || error.message.includes('cross-origin')) { + alert('图片下载失败：跨域访问被阻止。请尝试刷新页面后重新选择图片。'); + } else if (error.message.includes('网络')) { + alert('图片下载失败：网络连接问题。请检查网络连接后重试。'); + } else { + alert('图片下载失败，请重试。如果问题持续存在，请尝试选择其他图片。'); + } + } + } return (
{props.children}
 ); diff --git a/src/components/Themes/BackgroundTheme.js b/src/components/Themes/BackgroundTheme.js index 8408af4..8a56563 100644 --- a/src/components/Themes/BackgroundTheme.js +++ b/src/components/Themes/BackgroundTheme.js @@ -23,7 +23,7 @@ const BackgroundTheme = ({ config }) => {
- preview + preview
diff --git a/src/components/Themes/BasicTheme.js b/src/components/Themes/BasicTheme.js index 39d6a32..a0ff450 100644 --- a/src/components/Themes/BasicTheme.js +++ b/src/components/Themes/BasicTheme.js @@ -16,7 +16,7 @@ const BasicTheme = ({ config }) => { {unsplashImage ?
- preview + preview
diff --git a/src/components/Themes/MobileMockupTheme.js b/src/components/Themes/MobileMockupTheme.js index eb8e72c..1225b93 100644 --- a/src/components/Themes/MobileMockupTheme.js +++ b/src/components/Themes/MobileMockupTheme.js @@ -16,7 +16,7 @@ const MobileMockupTheme = ({ config }) => { {unsplashImage ?
- preview + preview
diff --git a/src/components/Themes/ModernTheme.js b/src/components/Themes/ModernTheme.js index 51f43a5..f1e1731 100644 --- a/src/components/Themes/ModernTheme.js +++ b/src/components/Themes/ModernTheme.js @@ -16,7 +16,7 @@ const ModernTheme = ({ config }) => { {unsplashImage ?
- preview + preview
diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js index b3b4b9a..74fd471 100644 --- a/src/components/Themes/OutlineTheme.js +++ b/src/components/Themes/OutlineTheme.js @@ -16,7 +16,7 @@ const OutlineTheme = ({ config }) => { {unsplashImage ?
- preview + preview
diff --git a/src/components/Themes/PreviewTheme.js b/src/components/Themes/PreviewTheme.js index 287f018..66d4c07 100644 --- a/src/components/Themes/PreviewTheme.js +++ b/src/components/Themes/PreviewTheme.js @@ -16,7 +16,7 @@ const PreviewTheme = ({ config }) => { {unsplashImage ?
- preview + preview
diff --git a/src/components/Themes/StylishTheme.js b/src/components/Themes/StylishTheme.js index 33e953f..8fcfd85 100644 --- a/src/components/Themes/StylishTheme.js +++ b/src/components/Themes/StylishTheme.js @@ -33,7 +33,7 @@ const StylishTheme = ({ config }) => {
{unsplashImage ?
- preview + preview