初始化

2024-11-05 17:43:01 +08:00
parent 2a10e37c10
commit 4e1140419a
97 changed files with 8700 additions and 89 deletions
@@ -0,0 +1,143 @@
+<template>
+  <div v-if="!canvasUrl" class='invitation-model-fixed' id="canvas">
+    <img src="../assets/yaoqingbeijingtu.png" alt="" class="big-img">
+    <img class="ewm" :src="'data:image/png;base64,'+imgEncode" alt="">
+    <!-- <img src="" alt=""> -->
+  </div>
+  <div v-if="canvasUrl" class="img-fixed">
+    <img :src="canvasUrl" alt="">
+  </div>
+  
+  <!-- <img src="" alt=""> -->
+  <Savesuccessmodel  v-if="false"  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { rulesForm, resetForm, rulesPhone } from '@/com/index'
+import dd from 'dingtalk-jsapi'
+import html2canvas from 'html2canvas'
+import Savesuccessmodel from '@/components/save-success.vue'
+import { getToken, getVisitorRecord, getWhiteCode } from '@/api/admin.js'
+
+
+/* @data */
+  const router = useRouter()
+  const store = useStore()
+  const imgEncode = ref('')
+  const raw = ref('')
+  const canvasUrl = ref('')
+
+/* @setup */
+  
+/* @method */
+
+  const onClickDown1 = () =>{ 
+    // const byteCharacters = atob(imgEncode.value);
+    // const byteNumbers = new Array(byteCharacters.length);
+    // for (let i = 0; i < byteCharacters.length; i++) {
+    //   byteNumbers[i] = byteCharacters.charCodeAt(i);
+    // }
+    // const byteArray = new Uint8Array(byteNumbers);
+    // const blob = new Blob([byteArray], { type: 'image/jpeg' });
+    // raw.value = byteArray
+    // // 创建可下载链接
+    // const url = URL.createObjectURL(blob);
+
+    // // 创建隐藏的<a>标签
+    // const link = document.createElement('a');
+    // link.href = url;
+    // link.download = 'fileName';
+
+    // // 模拟点击隐藏的<a>标签来触发下载
+    // link.click();
+
+    // // 清理URL对象
+    // URL.revokeObjectURL(url);
+  }
+  const onClickA =() =>{
+    const canvas = document.getElementById('canvas')
+    console.log(canvas.offsetHeight)
+    console.log(canvas.scrollHeight)
+    dd.previewImage({
+      urls: [
+        canvasUrl.value,
+      ],
+      current: 1,
+      success: () => {},
+      fail: () => {},
+      complete: () => {},
+    });
+
+  }
+  const onClickDown = () =>{
+    // let options = { scale: 1, allowTaint: false, useCORS: true, width: '375', height: '649', backgroundColor: null }
+    autoPicture('canvas')
+  }
+  const autoPicture = async (el, options) => {
+    // let { scale = 1, allowTaint = false, useCORS = true, width = '375', height = '649', backgroundColor = null } = options
+    const id = document.getElementById(el)
+    // alert(document.getElementById('canvas').offsetWidth
+    const canvas = await html2canvas(id, {
+      scale: 2, //缩放比例,默认为1
+      allowTaint: false, //是否允许跨域图像污染画布
+      useCORS: true, //是否尝试使用CORS从服务器加载图像
+      // width: document.getElementById('canvas').offsetWidth, //画布的宽度
+      // height: document.getElementById('canvas').offsetHeight, //画布的高度
+      width: document.getElementById('canvas').offsetWidth, //画布的宽度
+      height: document.getElementById('canvas').offsetHeight, //画布的高度
+      backgroundColor: null //画布的背景色，默认为透明
+    })
+    // canvas.toDataURL('image/png')
+    // console.log(canvas.toDataURL('image/png'))
+    canvasUrl.value = canvas.toDataURL('image/png')
+    
+    
+  }
+  // localStorage.setItem('token', 123456)
+  getWhiteCode().then(res =>{
+    console.log(res)
+    imgEncode.value = res.imgEncode
+    // autoPicture(canvas)
+    // raw.value = window.atob(res.imgEncode);
+    setTimeout(()=>{
+      onClickDown()
+    }, 100)
+    
+  })
+ 
+</script>
+
+<style lang='scss' scoped>
+.invitation-model-fixed{
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  // background: url('../assets/yaoqingbeijingtu.png') left top/100% auto no-repeat;
+  background: #fff;
+  .big-img{
+    width: 100%;
+  }
+  .ewm{
+    position: absolute;
+    left: 50%;
+    top: 4rem /* 300/75 */;
+    transform: translateX(-50%);
+    width:4.5333rem /* 340/75 */;
+    height: 4.5333rem /* 340/75 */;
+  }
+
+}
+.img-fixed{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  img{
+    width: 100%;
+  }
+}
+</style>