uniapp canvas生成二维码海报
2021-02-20 本文已影响0人
吃肉肉不吃肉肉
效果如下图：
（二维码上是我打的水印哈哈哈哈哈~）
image.png
完整代码如下：
<template>
<view class="">
<view class="pc-container">
<image :src="imgurl" mode="aspectFill" @longpress="saveImage"></image>
<canvas canvas-id="mycanvas" style="width: 590rpx;height: 998rpx;backgroundColor: #FFFFFF" v-show="canvasShow"></canvas>
</view>
<view class="basecolor sharetext">长按二维码发送给代理即可邀请加入</view>
<view class="qrimg">
<tki-qrcode
ref="qrcode"
:val="val"
:icon="icon"
:size="size"
:background="background"
:foreground="foreground"
:pdground="pdground"
:lv="lv"
@result="qrR"
:onval="onval"
:loadMake="loadMake"/>
</view>
</view>
</template>
<script>
import { mapState } from 'vuex'
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"//tkiQrcode二维码生成插件可在插件市场自行下载
import { _API_GzhWebInit } from '@/apis/verify.js'
export default {
components: {tkiQrcode},
data() {
return {
bgc:'../../static/white.png',
imgurl:'',
Path:'',
canvasShow:true,
src: '',
// imp:'../../static/index.html',
platform:'',
val: '', // 要生成的二维值 可以跳转一个新界面
size: 450, // 二维码大小
background: '#fff', // 背景色
foreground: '#000000', // 前景色
pdground: '#000000', // 角标色
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
onval: true, // val值变化时自动重新生成二维码 （一定要注意这个值的设置 刷新二维码使用的）
loadMake: true, // 组件加载完成后自动生成二维码
icon:'../../static/avatar.jpg'
}
},
onHide() {
uni.removeStorageSync('person-card');
},
mounted() {
//如果本地有图片了，直接取，解决一些页面切换canvas没有重画
// if(uni.getStorageSync('person-card')){
// // this.canvasShow = false;
// this.imgurl = uni.getStorageSync('person-card');
// }else{
// // this.canvasImage();
// }
},
onLoad() {
console.log("show")
_API_GzhWebInit().then(res => {
this.val=res.url
})
},
methods: {
qrR(path){
//获取到的二维码path是base64格式
uni.showLoading({
title:'加载中',
mask:true
})
let { nickname, id } = this.userinfo
let myCanvas = uni.createCanvasContext('mycanvas', this);
myCanvas.drawImage('../../static/white.png', 0, 0, 375, uni.upx2px(1020));//设置一个纯白色背景图，否则生成的图片背景是透明的
myCanvas.drawImage('../../static/avatar.jpg',uni.upx2px(250),50, 60,60);
let fontSizea = 18;
myCanvas.fillStyle="#333333";
myCanvas.font = `bold ${fontSizea}px Arial`;//绘制文字
myCanvas.textAlign ='center'
myCanvas.fillText(`“${nickname.length > 18 ? nickname.slice(0, 18) + '...' : nickname }”`, uni.upx2px(300), 130)
myCanvas.fillText('邀请你加入大卫博士',uni.upx2px(300),155);
//drawImage只能绘制本地图片和base64图片，无法绘制网络图片以及服务端返回的图片
myCanvas.drawImage(path,uni.upx2px(74),165,uni.upx2px(460), uni.upx2px(460));
myCanvas.fillStyle="#F76454";
myCanvas.fillText('长按-识别二维码-填写信息',uni.upx2px(300),uni.upx2px(870));
//开始绘画，必须调用这一步，才会把之前的一些操作实施
myCanvas.draw(true,()=>{
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
success: (res) => {
// 在H5平台下，tempFilePath 为 base64
this.imgurl = res.tempFilePath;
this.canvasShow = false;
uni.hideLoading();
uni.setStorageSync('person-card',this.imgurl);
},
fail: () => {
uni.showToast({
title: '名片加载失败',
duration: 2000
});
}
});
});
},
},
computed: {
...mapState([
'userinfo'
])
}
}
</script>
<style lang="scss">
image{
width: 680rpx;
height: 1000rpx;
border-radius: 14rpx;
background-color: #fff;
}
.pc-container{
width: 680rpx;
height: 1000rpx;
// height: 1000rpx;
margin: 0 auto;
overflow: hidden;
background-color: #FFFFFF;
margin-top: 20rpx;
}
.sharetext {
font-size: 80rpx;
text-align: center;
margin: 8rpx 0;
box-sizing: border-box;
padding: 30rpx 24rpx;
}
.qrimg{
position: fixed;
top: 50;
left: 50;
z-index: -1;
}
</style>
