From 25f11a77cbee3e4a87b7c96d5bb5bf97a9b40aad Mon Sep 17 00:00:00 2001
From: tobiichi3227 <cz1346219@gmail.com>
Date: Sun, 7 Apr 2024 13:30:27 +0800
Subject: [PATCH] feat: copy result image for sharing Close #15

---
 fortune_generator/index.html    |  2 ++
 fortune_generator/js/fortune.js | 20 +++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/fortune_generator/index.html b/fortune_generator/index.html
index 45cc805..f7c4100 100644
--- a/fortune_generator/index.html
+++ b/fortune_generator/index.html
@@ -12,6 +12,7 @@
   <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
   <!-- jquery -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js" integrity="sha512-7tWCgq9tTYS/QkGVyKrtLpqAoMV9XIUxoou+sPUypsaZx56cYR/qio84fPK9EvJJtKvJEwt7vkn6je5UVzGevw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <link rel="stylesheet" href="./css/styles.css">
   <script>
     if ('serviceWorker' in navigator) {
@@ -96,6 +97,7 @@
 
     <div class="row">
       <button class="col-4 offset-4" id="btn" onclick="getLuck()">點擊打卡</button>
+      <button class="col-4 offset-4" id="btn-copy-result" onclick="copyResultImageToClipboard()" style="display: none;">複製結果</button>
       <div class="col-2 offset-2 bx bx-moon" id="dark-mode-icon"></div>
     </div>
 
diff --git a/fortune_generator/js/fortune.js b/fortune_generator/js/fortune.js
index 29d8f52..397a390 100644
--- a/fortune_generator/js/fortune.js
+++ b/fortune_generator/js/fortune.js
@@ -291,4 +291,22 @@ function getLuck() {
   Update();
 }
 
-init_page();
\ No newline at end of file
+function copyResultImageToClipboard() {
+  let result = document.querySelector('#result-page');
+
+  let title = document.createElement('div');
+  title.classList.add('row');
+  title.appendChild(document.querySelector('#title').cloneNode(true));
+  result.insertBefore(title, result.firstChild);
+
+  htmlToImage.toBlob(result, {
+    skipFonts: true,
+    preferredFontFormat: 'woff2',
+    backgroundColor: 'white',
+  }).then(blob => {
+    navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+    result.removeChild(title);
+  });
+}
+
+init_page();