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>
 

fortune_generator/js/fortune.js

@@ -291,4 +291,22 @@ function getLuck() {
   Update();
 }
 
-init_page();
+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();