uni VUE使用canvas绘制海报并分享微信好友及朋友圈
先贴代码
代码中关键步骤均有注释
二维码生成的库 没有贴出来 大家自行寻找 或者暂时先写死一个图片
绘制方法写在 mounted 生命周期内
ctx.drawImage(this.imgQr,this.imgWidth/2 ,this.imgHeight-100, 80, 80)， 定位图片的信息
第一个参数 图片文件
第二个参数 图片距离XY轴方向
最后两个参数 二维码的大小
<template>
<view>
<!-- <view class="topImg">
<image src="../../../static/images/invite.png" mode=""></image>
<view class="qrImg"><image :src="imgQr" mode=""></image></view>
</view> -->
<canvas :style="{width:imgWidth+'px',height:imgHeight+'px'}" canvas-id="myCanvas" class="topImg"></canvas>
<view class="imgTopFont" @click="copyAddredd">
复制邀请地址<u-icon name="coupon"></u-icon>
</view>
<view class="btns">
<!-- <view class="left" @click="shareShow = true">分享海报</view> -->
<view class="right" @click="capture">保存海报</view>
</view>
<u-popup v-model="shareShow" mode="bottom" length="14%" border-radius="14">
<view class="bottom">
<view class="item-box" @click.stop="weixinShare">
<image src="/static/images/icon/weixin.png" mode=""></image>
<view class="logo">微信</view>
</view>
<view class="item-box" @click.stop="pyqShare">
<image src="/static/images/icon/pyq.png" mode=""></image>
<view class="logo">朋友圈</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
// 引入二维码库
import QR from '../../../common/wxqrcode.js'; // 二维码生成器
export default {
data() {
return {
imgQr: '',
arrayBuffer: {}, // 二维码对象
photoUrl: '', // 推广的截图
shareShow: false,
// 测试
bgUrl: require('../../../static/images/invite.png'),
providerList: [],
//分享背景图 注意不能使用网络图片 否则最后无法将canvas转为图片格式
iconsize: 30, //二维码图标大小 注意此大小不会跟随二维码size 动态变化，设置时需注意大小，不要太大，以免无法识别
saveImg: '', //将canvas转成为图片
imgHeight: null, //canvas所画海报展示的高度
imgWidth: null, //canvas所画海报展示的宽度
canvasImgHeight: null, //canvas所画海报转成实际图片的高度
canvasImgWidth: null //canvas所画海报转成实际图片的宽度
};
},
mounted() {
try {
const res = uni.getSystemInfoSync(); //异步获取设备信息
this.imgWidth = res.windowWidth; //获取设备可使用设备宽度
this.imgHeight = res.windowHeight; //获取设备可使用窗口高度
this.canvasImgHeight = res.screenHeight; //获取设备屏幕高度
this.canvasImgWidth = res.screenWidth; //获取设备屏幕宽度
} catch (e) {
//TODO handle the exception
}
this.imgQr = QR.createQrCodeImg('http://kj.1zhdq.cn/h5/#/?id=' + uni.getStorageSync('user').invite_code, {
size: parseInt(300) //二维码大小
});
// 绘制
this.cap();
},
methods: {
cap() {
console.log('绘制');
let that = this
console.log(this.imgWidth, this.imgHeight, '宽高');
//创建canvas
const ctx = uni.createCanvasContext('myCanvas');
ctx.drawImage(this.bgUrl, 0, 0, this.imgWidth, this.imgHeight); //背景图
ctx.drawImage(this.imgQr,this.imgWidth/2 ,this.imgHeight-100, 80, 80); //二维码
ctx.draw(true, ret => {
//将canvas转成图片
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
quality: 1,
width: this.canvasImgWidth,
height: this.canvasImgHeight,
success: function(res) {
console.log('成功了');
// 在H5平台下，tempFilePath 为 base64
that.saveImg = res.tempFilePath;
console.log(res.tempFilePath);
},
fail: function(err) {
console.log('canvas 编译成图片失败', err);
}
},
this
);
});
},
capture() {
console.log('绘制');
console.log(this.saveImg, '获取图片');
uni.saveImageToPhotosAlbum({
filePath: this.saveImg,
success(res) {
console.log(res, '最后一步');
uni.showToast({
title: '保存成功',
icon: 'success',
duration: 2000,
success() {}
});
}
});
},
// 微信分享
weixinShare() {
let that = this;
uni.share({
provider: 'weixin',
scene: 'WXSceneSession',
type: 2,
imageUrl: that.saveImg,
success: function(res) {
console.log('success:' + JSON.stringify(res));
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
}
});
},
// 分享到朋友圈
pyqShare() {
let that = this;
uni.share({
provider: 'weixin',
scene: 'WXSenceTimeline',
type: 2,
imageUrl: that.saveImg,
success: function(res) {
console.log('success:' + JSON.stringify(res));
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
}
});
},
// 复制地址
copyAddredd() {
let that = this;
uni.setClipboardData({
data: 'http://kj.1zhdq.cn/h5/#/?id=' + uni.getStorageSync('user').invite_code, //要被复制的内容
success: () => { //复制成功的回调函数
uni.showToast({ //提示
title: '复制成功'
})
}
})
},
}
};
</script>
<style lang="less">
.topImg {
z-index: 10;
position: relative;
padding: 44rpx;
box-sizing: border-box;
width: 100%;
height: 1500rpx;
image {
width: 670rpx;
height: 1000rpx;
}
}
.qrImg {
position: absolute;
bottom: 68rpx;
right: 156rpx;
image {
width: 180rpx;
height: 180rpx;
}
}
.imgTopFont {
padding: 20rpx;
font-size: 30rpx;
text-align: center;
color: #666;
}
.btns {
display: flex;
color: #fff;
justify-content: space-evenly;
.left {
width: 339rpx;
height: 73rpx;
background-color: #ee7f31;
border-radius: 60rpx;
text-align: center;
line-height: 73rpx;
font-size: 29rpx;
}
.right {
width: 339rpx;
height: 73rpx;
background-color: #2b66ee;
border-radius: 60rpx;
text-align: center;
font-size: 29rpx;
line-height: 73rpx;
}
}
.popshow {
position: fixed;
background-color: #fff;
width: 100%;
height: 200rpx;
bottom: 0rpx;
left: 50%;
transform: translateX(-50%);
border-radius: 20rpx;
}
.bottom {
width: 356rpx;
margin: 0 auto;
margin-top: 56rpx;
display: flex;
justify-content: space-between;
.item-box {
text-align: center;
image {
width: 42rpx;
height: 42rpx;
}
.logo {
font-size: 22rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
text-align: center;
color: #9fa5ae;
line-height: 24rpx;
}
}
}
</style>