hzd/visitor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4.23

Browse Source
This commit is contained in:
hezhidong
2025-04-23 17:19:04 +08:00
parent 0fb61604d5
commit e1d13a3aeb
7 changed files with 557 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Invitation.vue
+92 -107
View File
@@ -1,143 +1,128 @@
<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 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="" />
</div>
<div v-if="canvasUrl" class="img-fixed">
<img :src="canvasUrl" alt="">
<img :src="canvasUrl" alt="" />
</div>
<!-- <img src="" alt=""> -->
<Savesuccessmodel v-if="false" />
<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'
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('')
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)
})
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{
<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{
.big-img {
width: 100%;
}
.ewm{
.ewm {
position: absolute;
left: 50%;
top: 4rem /* 300/75 */;
top: 4.9rem /* 300/75 */;
transform: translateX(-50%);
width:4.5333rem /* 340/75 */;
width: 4.5333rem /* 340/75 */;
height: 4.5333rem /* 340/75 */;
}
}
.img-fixed{
.img-fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
img{
img {
width: 100%;
}
}
</style>
</style>