✨ feat(证书组件): 证书直接生成为图片方便用户下载

客户要求

✨ feat(证书组件): 证书直接生成为图片方便用户下载
客户要求
hookehuyr
Commit 47f052289a6f01b6fc17ed6d4a0a84269f2bfa64 47f05228 1 parent 62731166
Showing 3 changed files with 79 additions and 19 deletions
.env.development
components.d.ts
src/components/DonateCert/index.vue
--- a/.env.development
View file @47f0522
+++ b/.env.development
View file @47f0522
@@ -4,11 +4,11 @@ VITE_BASE = /
 # 测试open-id
 # VITE_OPENID = api-test-openid
 # VITE_OPENID = o8BRf1gLDWieH3Y3JvbrI_4IjaME
-VITE_OPENID = oJLZq5t9PIKLW9tm1oSUNAuPwssA
+VITE_OPENID = oJLZq5hXgSv4zI1b8px22Wl7EuNA
 # VITE_OPENID = oJLZq5uT_6GwIh2tQWh1F9IoHZ3U
 # B端账号
 VITE_ID = 13761653761
 # 验证码
-VITE_PIN = 
+VITE_PIN =
--- a/components.d.ts
View file @47f0522
+++ b/components.d.ts
View file @47f0522
@@ -36,24 +36,20 @@ declare module 'vue' {
     Template: typeof import('./src/components/template/index.vue')['default']
     Test: typeof import('./src/components/LoginBox/test.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
-    VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCheckbox: typeof import('vant/es')['Checkbox']
     VanCol: typeof import('vant/es')['Col']
     VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
-    VanList: typeof import('vant/es')['List']
     VanLoading: typeof import('vant/es')['Loading']
     VanOverlay: typeof import('vant/es')['Overlay']
-    VanPicker: typeof import('vant/es')['Picker']
     VanPopover: typeof import('vant/es')['Popover']
     VanPopup: typeof import('vant/es')['Popup']
     VanRow: typeof import('vant/es')['Row']
     VanStepper: typeof import('vant/es')['Stepper']
-    VanSticky: typeof import('vant/es')['Sticky']
+    VanSwipe: typeof import('vant/es')['Swipe']
-    VanTab: typeof import('vant/es')['Tab']
+    VanSwipeItem: typeof import('vant/es')['SwipeItem']
-    VanTabs: typeof import('vant/es')['Tabs']
     VanTag: typeof import('vant/es')['Tag']
     VideoBar: typeof import('./src/components/MuiVideo/videoBar.vue')['default']
     VideoCard: typeof import('./src/components/VideoCard/index.vue')['default']
--- a/src/components/DonateCert/index.vue
View file @47f0522
+++ b/src/components/DonateCert/index.vue
View file @47f0522
 <template>
-  <div class="donate-certificate">
+  <div v-if="flag" ref="canvasRef" class="donate-certificate">
     <div class="header-bg">
-      <van-image width="100" height="100" fit="contain" :src="icon_cert" style="margin-top: 15vh;" />
+      <img src="http://gyzs.onwall.cn/zhengshu@2x1.png" style="margin-top: 18vh; margin-bottom: 1vh; width: 100px; height: 100%; object-fit: contain;" />
     </div>
     <div class="title">
       <van-row align="center">
@@ -26,10 +26,10 @@
         <p>上海市儿童基金会</p>
         <p>上海初心为爱公益基金会</p>
         <div style="position: absolute; width: 50%; height: 100%; top: 0; left: 0;">
-          <van-image height="100%" fit="contain" :src="icon_stamp01" />
+          <img style="height: 100%; object-fit: contain;" src="http://gyzs.onwall.cn/stamp011.png" />
         </div>
         <div style="position: absolute; width: 50%; height: 100%; top: 0; right: 0;">
-          <van-image height="100%" fit="contain" :src="icon_stamp02" />
+          <img style="height: 100%; object-fit: contain;" src="http://gyzs.onwall.cn/stamp021.png" />
         </div>
       </div>
     </div>
@@ -40,28 +40,92 @@
     <div style="height: 3rem;" />
     <div class="wrapper-border">
       <div class="top-bg">
-        <van-image :src="donate_top" style="width: 100%; height: 10rem;" />
+        <img src="http://gyzs.onwall.cn/donate_top1.png" style="width: 100%; height: 10rem;" />
       </div>
       <div class="center-bg">
-        <img :src="donate_center" :style="styleObject">
+        <img src="http://gyzs.onwall.cn/donate_center_1.png" :style="styleObject">
       </div>
       <div class="bottom-bg">
-        <van-image :src="donate_bottom" style="width: 100%;" />
+        <img src="http://gyzs.onwall.cn/donate_bottom_1.png" style="width: 100%;" />
       </div>
       <div style="height: 3rem;" />
     </div>
   </div>
+  <div v-if="imgUrl">
+    <img :src="imgUrl" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }">
+  </div>
 </template>
 <script setup>
-import icon_cert from '@images/zhengshu@2x.png'
+// import icon_cert from '@images/zhengshu@2x.png'
 import icon_stamp01 from '@images/stamp01.png'
 import icon_stamp02 from '@images/stamp02.png'
-import donate_top from '@images/donate_top.png'
+// import donate_top from '@images/donate_top.png'
-import donate_center from '@images/donate_center.png'
+// import donate_center from '@images/donate_center.png'
-import donate_bottom from '@images/donate_bottom.png'
+// import donate_bottom from '@images/donate_bottom.png'
 import $ from 'jquery'
+import html2canvas from "html2canvas";
+
+const canvasRef = ref(null);
+const imgUrl = ref('');
+const imgSrc = ref('');
+const flag = ref(true);
+const ref_width = ref('');
+const ref_height = ref('');
+onMounted(() => {
+  nextTick(() => {
+    let canvasDom = canvasRef.value;
+    ref_width.value = canvasDom.offsetWidth + 'px';
+    ref_height.value = canvasDom.offsetHeight + 'px';
+  });
+  createImage();
+});
+
+// 获取像素比
+const DPR = () => {
+  // 获取设备dpi
+  if (window.devicePixelRatio && window.devicePixelRatio > 1) {
+    return window.devicePixelRatio * 2
+  }
+  // 直接返回高像素比
+  return 8
+}
+
+const createImage = () => {
+  nextTick(() => {
+    // 获取要生成图片的 DOM 元素
+    let canvasDom = canvasRef.value;
+    const options = {
+      backgroundColor: '#fff',
+      // canvas: canvas,
+      useCORS: true,//配置允许跨域
+      scale: DPR(),
+      // windowWidth: document.body.scrollWidth,
+      // windowHeight: document.body.scrollHeight,
+      // x: 0,
+      // y: window.pageYOffset,
+      // allowTaint: true,
+      // background: "#d21f2c", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
+      dpi: 500 // 处理模糊问题
+    };
+    // console.log("获取指定的宽高", width, height, canvas);
+    html2canvas(canvasDom, options)
+      .then(canvas => {
+        try {
+          // 生成图片地址
+          imgUrl.value = canvas.toDataURL("image/png");
+          flag.value = false;
+        } catch (e) {
+          alert("图片跨域,保存失败");
+        }
+      })
+      .catch(error => {
+        console.error("绘制失败");
+        console.error(error);
+      });
+  });
+}
 </script>
 <script>