uniapp⽣成海报带⼆维码及保存
⽣成海报不难，都知道是⽤canvas画，但是在uniapp中会有⼀些bug，为了解决bug，下⾯是我的思路：
1.⾸先定义唯⼀容器，下⾯有image和canvas标签，为什么这样做呢，解决有些h5页⾯canvas画不出来，所以⽤image去接收并展⽰。
<view class="pc-container">
<image :src="imgurl" mode="aspectFill" @longpress="saveImage"></image>
<canvas canvas-id="mycanvas" v-show="canvasShow"></canvas>
</view>
2.页⾯中的宽⾼都是⾃⼰需求定义的，这样的样式是为了不让canvas画的时候在app端展现出来，也就是遮挡住canvas，也不让页⾯滚动。image{
width: 99%;
min-height: 996rpx;
border: 1px solid #BBBBBB;
display: block;
}
.pc-container{
width: 590rpx;
height: 1000rpx;
margin: 0 auto;
padding-top: 46rpx;svg和canvas的区别
overflow: hidden;
}
3.绘画
data() {
return {
imgurl:'',
canvasShow:true,
}
},
onHide() {
},
mounted() {
/
/如果本地有图⽚了，直接取，解决⼀些页⾯切换canvas没有重画
StorageSync('person-card')){
this.canvasShow = false;
this.imgurl = StorageSync('person-card');
}else{
this.canvasImage();
}
},
methods: {
canvasImage(){
uni.showLoading({
title:'加载中',
mask:true
})
let myCanvas = ateCanvasContext('mycanvas', this);
//画布尺⼨
// 坐标(0,0) 表⽰从此处开始绘制，相当于偏移。
//头像
myCanvas.drawImage('../../static/logo.png',33,44,65,65);
//参数：图⽚，左偏移，上偏移，宽，⾼
//认证图标
myCanvas.drawImage('../../static/logo.png',44,117,7,7);
let phone = '12456798798';
myCanvas.fillStyle = '#101010';
let fontSize = 10;
myCanvas.font = `${fontSize}px Arial`;//绘制⽂字
myCanvas.fillText('认证',55,124);
let fontSizea = 14;
myCanvas.font = `${fontSizea}px Arial`;//绘制⽂字
myCanvas.fillText('姓名：⽊村林',124,58);
myCanvas.fillText(`⼿机：  ${phone}`,124,76);
myCanvas.fillText('专业：⽊村林',124,94);
myCanvas.fillText('邀请码：⽊村林',124,112);
myCanvas.fillText('这是我的⼆维码名⽚，请惠存!',49,185);
//⼆维码
myCanvas.drawImage('../../static/logo.png',55,223,183,183);
myCanvas.fillText('扫码进⼊⼩程序',69,432);
myCanvas.fillText('添加我的名⽚',103,458);
//开始绘画，必须调⽤这⼀步，才会把之前的⼀些操作实施
myCanvas.draw(true,()=>{
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
success: (res) => {
// 在H5平台下，tempFilePath 为 base64
this.imgurl = pFilePath;
this.canvasShow = false;
uni.hideLoading();
uni.setStorageSync('person-card',this.imgurl);
},
fail: () => {
uni.showToast({
title: '名⽚加载失败',
duration: 2000
});
}
});
});
},
saveImage(){
uni.showActionSheet({
itemList: ['保存图⽚','取消'],
success: (res) => {
if(res.tapIndex == 0){
uni.saveImageToPhotosAlbum({
filePath: this.imgurl,//    图⽚⽂件路径，可以是临时⽂件路径也可以是永久⽂件路径，不⽀持⽹络图⽚路径
success: () => {
uni.showToast({
title: '保存成功',
duration: 2000
});
},
fail: () => {
uni.showToast({
title: '保存失败',
duration: 2000
});
}
});
}
},
fail: function (res) {
console.Msg);
}
});
}
}
4.⼩程序⼆维码在⼩程序官⽅⽂档⾥说的很清楚，需要由后台接⼝⽣成图⽚地址，返给你你画进canvas就⾏；如果是其他的⼆维码，你可以在uniapp插件市场去⽣成，取地址再画进去。
也就是说画⼆维码其实就是画图，调好位置就⾏。
5.关于赋值给image的src这⼀块⼉，按理来说应该将⽂件上传到服务器，再从服务器取回图⽚地址赋值。
⽽我这⾥的保存属于本地保存到相册，请稍加注意。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。