【大国重器】下载图片以供分享

package.json

@@ -12,6 +12,7 @@
     "axios": "^1.1.3",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.7",
+    "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "qrcode": "^1.5.3",

src/components/TreasureShare.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="treasure-share">
-    <article>
+    <article ref="article">
       <button
         class="close"
         @click="$emit('close')"
@@ -33,13 +33,33 @@
           draggable="false"
         >
       </div>
+      <button
+        v-if="!isSaving"
+        class="download"
+        @click="onClickDownload"
+      >
+        <img
+          class="download"
+          src="@/assets/images/download-from-cloud.png"
+          alt=""
+          draggable="false"
+        >
+        <span>保存图片</span>
+      </button>
     </article>
+    <a
+      v-show="false"
+      ref="forDownload"
+      :href="aDownloadHref"
+      download="share.jpg"
+    />
   </div>
 </template>
 
 <script>
 import QRCode from 'qrcode'
-import { ref } from "vue"
+import { ref, nextTick } from "vue"
+import html2canvas from "html2canvas"
 
 export default {
   setup() {
@@ -48,8 +68,37 @@ export default {
       qrcodeDataUrl.value = url
     })
 
+    const article = ref(null)
+    const forDownload = ref('')
+    const aDownloadHref = ref(null)
+    const isSaving = ref(false)
+    const onClickDownload = utils.throttle(function() {
+      isSaving.value = true
+      nextTick(() => {
+        // #capture 就是我们要获取截图对应的 DOM 元素选择器
+        html2canvas(article.value, {
+          useCORS: true, // 【重要】开启跨域配置
+          scale: 1,
+          allowTaint: true, // 允许跨域图片
+          preserveDrawingBuffer: true,
+        }).then((canvas) => {
+          aDownloadHref.value = canvas.toDataURL('image/jpeg', 1.0)
+          nextTick(() => {
+            forDownload.value.click()
+            isSaving.value = false
+          })
+        })
+      })
+    })
+
     return {
       qrcodeDataUrl,
+
+      article,
+      forDownload,
+      aDownloadHref,
+      isSaving,
+      onClickDownload,
     }
   },
 }
@@ -139,6 +188,32 @@ export default {
         object-fit: contain;
       }
     }
+    >button.download {
+      position: absolute;
+      bottom: 44px;
+      right: calc(-46px - 149px);
+      width: 149px;
+      height: 46px;
+      background: rgba(255,255,255,0.2);
+      border: 1px solid #FFFFFF;
+      border-radius: 23px;
+      >img.download {
+        width: 32px;
+        margin-right: 8px;
+        vertical-align: middle;
+      }
+      >span {
+        font-size: 16px;
+        color: #FFFFFF;
+        vertical-align: middle;
+      }
+    }
+    @media only screen and (max-width: 1110px) {
+      >button.download {
+        right: initial;
+        left: 50px;
+      }
+    }
   }
 }
 </style>

yarn.lock

@@ -2042,6 +2042,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -2543,6 +2548,13 @@ css-declaration-sorter@^6.3.1:
   resolved "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz#be5e1d71b7a992433fb1c542c7a1b835e45682ec"
   integrity sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 css-loader@^6.5.0:
   version "6.7.3"
   resolved "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.3.tgz#1e8799f3ccc5874fdd55461af51137fcc5befbcd"
@@ -3599,6 +3611,14 @@ html-webpack-plugin@^5.1.0:
     pretty-error "^4.0.0"
     tapable "^2.0.0"
 
+html2canvas@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@@ -5786,6 +5806,13 @@ terser@^5.10.0, terser@^5.14.1:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -5946,6 +5973,13 @@ utils-merge@1.0.1:
   resolved "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"