由于微信安全防控,我们无法直接生成并下载,但是可以打开图片后长按保存
1、npm依赖
npm install html2canvas --save
2、引入
javascript
import html2canvas from "html2canvas"
3、方法
javascript
exportCardAsImage() {
const cardElement = this.$refs.card.$el;
console.log(this.$refs.card);
html2canvas(cardElement).then((canvas) => {
const imageData = canvas.toDataURL('image/png');
console.log("图片", imageData);
this.pic(imageData)
});
},
pic(src) {
uni.previewImage({
urls: Array.isArray(src) ? src : [src],
current: '',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
});
},
4、完整代码
javascript
<template>
<view class="index">
<view class="top">
<view class="bg">
<image src="../../static/electronic_card/bg.png"></image>
</view>
</view>
<view class="main">
<view class="card" ref="card">
<image src="../../static/card/bg.png" mode=""></image>
<view class="content">
<view class="">
<view class="logo">
<image src="../../static/card/logo.png" mode=""></image>
</view>
<view class="txt">
姓 名:张明磊
<br>
班 级:1901班
<br>
联系方式:18888888888
<br>
入学年份:2019
<br>
No:HURA258998
</view>
</view>
<view class="img">
<image src="../../static/card/head.png" mode=""></image>
</view>
</view>
</view>
</view>
<view class="downbtn" @click="exportCardAsImage">查看与保存卡片</view>
</view>
</template>
<script>
import html2canvas from "html2canvas"
import utlis from '../../common/utils.js'
export default {
mixins: [utlis],
data() {
return {
}
},
onLoad() {
},
onUnload() {
},
methods: {
exportCardAsImage() {
const cardElement = this.$refs.card.$el;
console.log(this.$refs.card);
html2canvas(cardElement).then((canvas) => {
const imageData = canvas.toDataURL('image/png');
console.log("图片", imageData);
this.pic(imageData)
});
},
pic(src) {
uni.previewImage({
urls: Array.isArray(src) ? src : [src],
current: '',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
});
},
}
}
</script>
<style scoped lang="scss">
page {
background: #F9F9F9;
}
.index {
width: 100vw;
display: flex;
flex-direction: column;
// justify-content: center;
align-items: center;
}
.top {
width: 100vw;
.bg {
position: relative;
z-index: 1;
image {
height: 554rpx;
width: 100vw;
}
}
}
.main {
position: relative;
z-index: 2;
margin-top: -100rpx;
width: 716rpx;
height: 402rpx;
background: rgba(175, 0, 5, 0.78);
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
overflow: hidden;
// background: url("../../static/card/bg.png") repeat fixed center;
.card {
position: relative;
z-index: 1;
padding: 30rpx;
&>image {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 716rpx;
height: 402rpx;
}
.content {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
.logo {
image {
width: 296rpx;
height: 72rpx;
}
}
.txt {
line-height: 50rpx;
font-size: 24rpx;
color: #FFFFFF;
font-weight: 400;
}
.img {
display: flex;
// justify-content: center;
align-items: center;
margin-right: 88rpx;
image {
width: 182rpx;
height: 230rpx;
}
}
}
}
}
.downbtn {
margin: 0;
width: 690rpx;
height: 104rpx;
background: #AF0005;
border-radius: 72rpx 72rpx 72rpx 72rpx;
opacity: 1;
color: #FFFFFF;
font-weight: 500;
line-height: 104rpx;
text-align: center;
margin-top: 76rpx;
}
</style>