fix share imagen

krthr · Sep 25, 2024 · e4d57e6 · e4d57e6
1 parent 080c17b
commit e4d57e6
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 36 deletions.
diff --git a/resources/js/poem.js b/resources/js/poem.js
@@ -48,16 +48,19 @@ async function shareWithImage(payload) {
   console.log('shareWithImage', payload)
 
   if ('canShare' in navigator) {
-    const image = await createFile()
-
-    if (!image) {
+    const data = await generateImage()
+    if (!data) {
       return false
     }
 
+    const file = new File([data], 'poem.jpg', { type: 'image/jpeg' })
+
     const payloadWithImage = {
       ...payload,
-      files: [image],
+      files: [file],
     }
+
+    console.log('payloadWithImage', payloadWithImage)
     const canShare = navigator.canShare(payloadWithImage)
 
     if (canShare) {
@@ -72,9 +75,9 @@ async function shareWithImage(payload) {
 
 async function share() {
   const payload = {
-    title: window.poem.title,
-    text: window.poem.poem,
-    url: window.poem.url,
+    title: window.poemData.title,
+    text: window.poemData.poem,
+    url: window.poemData.url,
   }
 
   console.log('sharing', payload)
@@ -90,56 +93,74 @@ async function share() {
 /**
  *
  * @param {HTMLElement} node
- * @param {HTMLElement} title
  * @returns
  */
-export async function generateAndDownloadImage(node, title) {
-  console.log({ title }, 'generateAndDownloadImage')
+async function generateImage() {
+  console.log('generatingImage')
+
+  try {
+    const node = window.poem
 
-  const userAgent = navigator.userAgent
+    const { toBlob } = await import('html-to-image')
+    node.style.padding = '2rem'
 
-  const { toBlob } = await import('html-to-image')
+    const userAgent = navigator.userAgent
 
-  node.style.padding = '2rem'
+    if (SAFARI.test(userAgent) || IOS.test(userAgent) || MACOS.test(userAgent)) {
+      // https://github.com/bubkoo/html-to-image/issues/361#issuecomment-1402537176
+      await toBlob(node)
+      await toBlob(node)
+      await toBlob(node)
+    }
 
-  if (SAFARI.test(userAgent) || IOS.test(userAgent) || MACOS.test(userAgent)) {
-    // https://github.com/bubkoo/html-to-image/issues/361#issuecomment-1402537176
-    await toBlob(node)
-    await toBlob(node)
-    await toBlob(node)
-  }
+    const blob = await toBlob(node, {
+      type: 'image/jpeg',
+      backgroundColor: 'white',
+      pixelRatio: 2,
+    })
 
-  const blob = await toBlob(node, {
-    type: 'image/jpeg',
-    backgroundColor: 'white',
-    pixelRatio: 2,
-  })
+    node.style.padding = '0rem'
 
-  node.style.padding = '0rem'
+    if (!blob) {
+      return
+    }
 
-  if (!blob) {
-    return
+    return blob
+  } catch (error) {
+    console.error(error)
   }
+}
+
+/**
+ *
+ * @param {HTMLElement} node
+ * @param {HTMLElement} title
+ * @returns
+ */
+export async function generateAndDownloadImage(title) {
+  console.log({ title }, 'generateAndDownloadImage')
 
-  const dataUrl = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.download = `${title.textContent.toLowerCase().trim()}-${Date.now()}.jpg`
-  a.href = dataUrl
-  a.click()
+  const blob = await generateImage(title)
+  if (blob) {
+    const dataUrl = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.download = `${title.textContent.toLowerCase().trim()}-${Date.now()}.jpg`
+    a.href = dataUrl
+    a.click()
 
-  URL.revokeObjectURL(dataUrl)
+    URL.revokeObjectURL(dataUrl)
+  }
 }
 
 window.onload = () => {
-  const poem = document.querySelector('#poem')
   const title = document.querySelector('#title')
   const bownloadBtn = document.querySelector('#download-poem')
 
   bownloadBtn.onclick = async () => {
     bownloadBtn.setAttribute('disabled', true)
     bownloadBtn.classList.add('loading')
 
-    await generateAndDownloadImage(poem, title)
+    await generateAndDownloadImage(title)
 
     window.gtag && window.gtag('event', 'download_image')
     window.LogRocket && window.LogRocket.track('download_image')

diff --git a/resources/views/pages/poem.edge b/resources/views/pages/poem.edge
@@ -7,7 +7,7 @@
 })
   @slot('meta')
     <script>
-      window.poem = {
+      window.poemData = {
         title: "{{ poem.title }}",
         poem: `{{ poem.poem }}`,
         url: "{{ request.completeUrl() }}",