129 lines
3.9 KiB
Vue
129 lines
3.9 KiB
Vue
<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="" />
|
|
</div>
|
|
<div v-if="canvasUrl" class="img-fixed">
|
|
<img :src="canvasUrl" alt="" />
|
|
</div>
|
|
<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: 4.9rem /* 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>
|