testing html2canvas

marwan · Mar 29, 2024 · 552a71f · 552a71f
1 parent 8fa6833
commit 552a71f
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 10 deletions.
diff --git a/public/assets/js/html2canvas.min.js b/public/assets/js/html2canvas.min.js
diff --git a/public/index.html b/public/index.html
@@ -13,9 +13,10 @@
     <link href="/assets/images/apple-touch-icon.png" rel="apple-touch-icon" />
     <link rel="stylesheet" href="/assets/css/global.css" />
     <link rel="stylesheet" href="/assets/css/mushaf.css" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.css" rel="stylesheet" />
     <script src="https://cdn.tailwindcss.com"></script>
     <script defer src="/build/bundle.js"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.css" rel="stylesheet" />
+    <script defer src="/assets/js/html2canvas.min.js"></script>
     <!-- <script src="/preline.js"></script> -->
 
     <!-- tailwind config -->

diff --git a/src/App.svelte b/src/App.svelte
@@ -37,15 +37,14 @@
 </script>
 
 <Router>
-  <div class="max-w-screen-lg mx-auto py-16 select-none {$currentPageStore === 'page' ? 'px-0 md:px-4' : 'px-4'}">
+  <div class="max-w-screen-lg mx-auto pt-16 pb-24 select-none {$currentPageStore === 'page' ? 'px-0 md:px-4' : 'px-4'}">
     <!-- include the UI elements -->
     <Navbar />
     <Drawer />
     <InitialSetupModal />
     <AudioModal />
-    <BottomNavbar />
     <TajweedRulingModal />
-    <!-- <BottomPlayer /> -->
+    <BottomNavbar />
 
     <!-- components will be rendered in this div -->
     <div>

diff --git a/src/components/verses/VersesButtons.svelte b/src/components/verses/VersesButtons.svelte
@@ -8,7 +8,7 @@
   import { showAudioModal } from "$utils/audioController";
   import { currentPageStore, userSettingsStore, audioSettingsStore } from "$utils/stores";
   import { updateSettings } from "$utils/updateSettings";
-  import { disabledElement } from "$utils/commonStyles";
+  import { downloadVerseImage } from "$utils/downloadVerseImage";
 
   // icons
   import Bookmark from "$svgs/Bookmark.svelte";
@@ -45,6 +45,8 @@
     <svelte:component this={$audioSettingsStore.isPlaying === true && $audioSettingsStore.playingKey === key ? Pause : Play} />
   </button>
 
+  <button on:click={() => downloadVerseImage(key)}> Pic </button>
+
   <!-- verses option dropdown -->
   <!-- <div class="relative inline-block text-left">
     <button data-dropdown-toggle="dropdown" class={buttonClasses} on:click={() => verseDropdownToggle()}>

diff --git a/src/lib/html2canvas.min.js b/src/lib/html2canvas.min.js
diff --git a/src/utils/downloadVerseImage.js b/src/utils/downloadVerseImage.js
@@ -0,0 +1,23 @@
+export function downloadVerseImage(key) {
+  html2canvas(document.getElementById(key), {
+    letterRendering: 1,
+    allowTaint: true,
+    useCORS: true,
+  })
+    .then(function (canvas) {
+      download(canvas, key);
+    })
+    .catch((e) => {
+      alert(e);
+    });
+}
+
+function download(canvas, key) {
+  let downloadLink = document.createElement("a");
+  downloadLink.setAttribute("download", `Verse ${key} - ${Date.now()}.png`);
+  canvas.toBlob(function (blob) {
+    let url = URL.createObjectURL(blob);
+    downloadLink.setAttribute("href", url);
+    downloadLink.click();
+  });
+}
diff --git a/src/views/Page.svelte b/src/views/Page.svelte
@@ -5,11 +5,10 @@
   import { Link } from "svelte-routing";
   import VersesWords from "$verses/VersesWords.svelte";
   import Spinner from "$svgs/Spinner.svelte";
-  import { websiteURL } from "$data/websiteSettings";
   import { currentPageStore, wordTypeStore } from "$utils/stores";
   import { updateSettings } from "$utils/updateSettings";
   import { quranMetaData } from "$data/quranMeta";
-  import { tabPillElement } from "$utils/commonStyles";
+  import { tabPillElement, disabledElement } from "$utils/commonStyles";
   import BismillahMushaf from "$svgs/BismillahMushaf.svelte";
 
   updateSettings({ type: "displayType", value: 4 });
@@ -87,15 +86,15 @@
 <PageMeta title={`Page ${page}`} />
 
 <div class="flex flex-row space-x-8 my-8 justify-center">
-  <Link to="/page/{+page - 1}" class={tabPillElement}>{@html "&#x2190;"} Previous Page</Link>
-  <Link to="/page/{+page + 1}" class={tabPillElement}>Next Page {@html "&#x2192;"}</Link>
+  <Link to="/page/{+page - 1}" class="{tabPillElement} {+page === 1 && disabledElement}">{@html "&#x2190;"} Previous Page</Link>
+  <Link to="/page/{+page + 1}" class="{tabPillElement} {+page === 604 && disabledElement}">Next Page {@html "&#x2192;"}</Link>
 </div>
 
 <div class="text-center mt-8 text-xl">
   {#await fetchData}
     <Spinner />
   {:then}
-    <div class="max-w-2xl space-y-2 pb-2 mx-auto">
+    <div class="max-w-3xl space-y-2 pb-2 mx-auto">
       {#each Array.from(Array(endingLine + 1).keys()).slice(startingLine) as line}
         <!-- if it's the first verse of a chapter -->
         {#if chapters.length > 1 && lines.includes(line) && verses[lines.indexOf(line)] === 1}