<template>
<view class="page">
<uni-popup ref="popup" type="center">
<view class="invitePoster">
<image @click="cacel"
class="closeIcon" src="../../static/common/Btn_Close.png" mode=""></image>
<!-- #ifdef H5 -->
<!-- h5端部分机型用uniappimg标签无法长按保存,用回原生img标签 -->
<img class="strategyImgs" :src="data.imgURL" />
<!-- #endif -->
<!-- #ifdef APP -->
<image class="strategyImgs" :src="data.imgURL" mode="widthFix"></image>
<!-- #endif -->
<!-- #ifdef APP -->
<view class="popupInfo">
<view class="buttons">
<view class="button1" @click="download">
<text>下载海报</text>
</view>
</view>
</view>
<!-- #endif -->
</view>
</uni-popup>
<!-- 组件方式生成海报和二维码,需在页面添加标签,并且生成后会直接在页面显示出来,(放在页面下方,并且阻止用户滑动下去发现。如果标签没有生成是不会画图的,只能这样取巧挡住用户发现)因此生成海报后隐藏两个标签 也可以把标签放在弹窗里面直接当做海报生成出来,但需自己调试 -->
<canvas ref="myCanvas" canvas-id="myCanvas" v-show="data.showcanvas"
style="width: 563rpx;height: 1001rpx;margin-top: 100px;"></canvas>
<uqrcode ref="uqrcodeRef" style="margin-top: 100px;" v-show="data.showcanvas"
canvas-id="uqrcode" value="123" :options="{ margin: 2 }"></uqrcode>
</view>
</template>
<script lang='ts' setup>
//组件方式生成二维码 直接引入uqrcode.js即可使用
import { ref ,computed,onMounted} from "vue"
import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
const popup = ref(null)
const uqrcodeRef = ref(null)
const data = ref({
isShowPopup:false,
qrCodeUrl:"",
imgURL:'',
showcanvas:true
})
const APPsetImage = () => {
if (data.value.imgURL) {
return
}
const codeData = "二维码需要的内容"
const qr = new UQRCode()
console.log(qr);
// 设置二维码内容
qr.data = codeData;
// 设置二维码大小,必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas上下文
var canvasContext = uni.createCanvasContext('uqrcode', this); // 如果是组件,this必须传入
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
qr.drawCanvas().then((res)=>{
console.log(res);
})
setTimeout(() => {
uni.canvasToTempFilePath(
{
canvasId: 'uqrcode',
success: res => {
console.log(res.tempFilePath);
// 调用绘制方法将二维码图案绘制到canvas上
let imgUrl = '../../static/invite/Bg_Sharepop.png';//背景图片
let posterQrCodeImg = res.tempFilePath;//二维码
const ctx = uni.createCanvasContext('myCanvas', this);
console.log(posterQrCodeImg,22222);
uni.getImageInfo({
src: imgUrl,
success(res) {
//先画背景图片
ctx.drawImage(res.path, 0, 0, 310, 556)
ctx.drawImage(posterQrCodeImg, 38, 174,135,135);
ctx.fillStyle = "#f4ce8d"; //字体颜色
ctx.font = '16px "my-font-bangbang"'; //字体大小和字体样式
ctx.fillText('要显示的文字', 16,322) // (x, y)为文字显示位置
// draw方法 把以上内容画到 canvas 中
ctx.draw(false, (ret) => {
console.log(ret);
// 保存canvas为图片
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 563,
height: 1001,
destWidth: 563,
destHeight: 1001,
canvasId: 'myCanvas',
quality: 1,
complete: function (res) {
console.log(res.tempFilePath);
data.value.imgURL=res.tempFilePath;
//生成图片后隐藏标签 有时候会生成失败,或者弹窗显示图片后图片马上消失 多调试几次 代码没有问题的 研究一下是哪步需要小修改
data.value.showcanvas = false
}
});
});
}
})
},
fail: err => {
console.log(err);
}
},
// this // 组件内使用必传当前实例
);
}, 300);
}
const show = () => {
if (!token) {
uni.navigateTo({
url:"/pages/login/login"
})
}else {
APPsetImage()
popup.value.open('center')
}
}
const copy = () => {
uni.setClipboardData({
data:userInfo.info.inviteCode,
success:() => {
data.value.isShowPopup=true
}
})
}
const download = () => {
popup.value.close('center')
// #ifdef H5
let a = document.createElement('a')
a.download = ''
a.href = data.value.imgURL
document.body.appendChild(a)
a.click()
a.remove()
// #endif
// #ifdef APP
uni.saveImageToPhotosAlbum({
filePath:data.value.imgURL,
success: () => {
uni.showToast({
title: '保存成功',
duration:1000
});
},
fail: () => {
uni.showToast({
title: '保存失败',
icon:"error",
duration:2000
});
}
})
// #endif
}
const cacel = () => {
popup.value.close('center')
}
</script>
<style scoped lang='scss'>
.invite{
min-height: 100vh;
display: flex;
flex-flow: column;
align-items: center;
overflow-y: auto;
background: url(../../static/invite/Bg_Basemap.png) ;
background-size: 100% 100%;
.topImgs{
width: 153px;
color: #fff;
}
}
</style>
uniapp vue3.2+ts+uqrcode生成二维码合成海报 h5端和app端通用(只测试了安卓)
最新推荐文章于 2024-05-06 12:13:27 发布