直接上代码:没有基础的可能看不太懂
// 创建 canvas 绘图上下文对象
const context = wx.createCanvasContext('screenCanvas');
//要绘制海报用到的图片
const imageUrl="/static/images/family.jpg"
//小程序二维码
const imageUrl1="/static/images/erCode.png"
// 绘制图片到canvas
context.drawImage(imageUrl, 0, 0, canvasWidth.value,canvasHeight.value*0.6)
//开始绘制线条
context.beginPath();
//定位到线条起始点
context.moveTo(0, canvasHeight.value * 0.5);
//拉一条线到中间坐标
// context.lineTo(0, canvasHeight.value * 0.5);
//绘制圆弧从x轴0.25-0.5,y轴:0.6-0.6不严谨但是效果一样弧度为300
context.arcTo(canvasWidth.value / 4, canvasHeight.value * 0.6, canvasWidth.value * 0.5, canvasHeight.value * 0.6,canvasHeight.value-canvasHeight.value * 0.6 );
//绘制圆弧从x轴0.75-1,y轴:0.6-0.5不严谨但是效果一样弧度为300
context.arcTo(canvasWidth.value * 0.75, canvasHeight.value * 0.6, canvasWidth.value, canvasHeight.value * 0.5,canvasHeight.value-canvasHeight.value * 0.6 );
// 划线从(1,0.5)开始
context.lineTo(canvasWidth.value, canvasHeight.value * 0.5);
// 划线从(1,0.5)开始-(1,1)
context.lineTo(canvasWidth.value, canvasHeight.value);
// 划线从(1,1)-(0,1)
context.lineTo(0, canvasHeight.value);
// 划线从(0,1)-(0,0.5)
context.lineTo(0, canvasHeight.value*0.5);
//绘制完成设置填充色
context.fillStyle = "rgb(255, 128, 0)";
//开始填充
context.fill();
context.closePath()
//判断缩放比例二维码
const a=canvasWidth.value/710
const b=canvasHeight.value/674
// 对比比例哪个小就以哪个为标准缩放
const scX=a>b?b:a
//这里缩放后除以2是为了以基准宽的0.5作为二维码宽度
const width=710*scX/2
const height=674*scX/2
//动态绘制二维码到指定位置与canvas的比例可能发生改变但是不会发生形变
context.drawImage(imageUrl1,0, 0,710,674, canvasWidth.value / 2 -width/2, canvasHeight.value*0.65-height/2, width, height);
context.closePath();
//开始绘制文字
context.beginPath();
//设置颜色
context.fillStyle = "rgb(255, 85, 0)";
// 设置字体样式
context.font='italic bold 33px Microsoft Yahei'
//字体内容
context.fillText('速达·陪诊', canvasWidth.value / 10, canvasHeight.value/2.6)
context.font='italic bold 30px Microsoft Yahei'
context.fillText('快速·必达', canvasWidth.value / 2, canvasHeight.value/2.2)
context.closePath();
context.fillStyle = "rgb(255, 255, 255)";
context.font='18rpx Microsoft Yahei'
//动态可修改文字内容
const len=btText1.value.length/2
context.fillText(btText1.value, canvasWidth.value /2-20*len, canvasHeight.value-50)
context.font="18rpx Microsoft Yahei"
context.fillText(btText2.value, canvasWidth.value / 2-20*len, canvasHeight.value-25)
//绘制并保留上面的内容
context.draw(true)
// 开始绘制
context.draw(true, function() {
// 将 canvas 保存为临时图片
wx.canvasToTempFilePath({
canvasId: 'screenCanvas',
destWidth: canvasWidth.value,
destHeight: canvasHeight.value,
success: function (res) {
tempFilePath.value = res.tempFilePath;
wx.showToast({
title: '生成成功',
icon: 'success',
duration: 2000
})
},
fail: function (res) {
wx.showToast({
title: '生成失败',
icon: 'none',
duration: 2000
})
}
})
});
}
const saveToLocal=()=>{
uni.saveImageToPhotosAlbum({
filePath: tempFilePath.value,
success: function (res) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
fail(res) {
wx.showToast({
title: '保存失败',
icon: 'success',
duration: 2000
})
const re=photoWrite('albumAuthorized','保存到相册')
if(re!=0){
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
wx.showToast({
title: '授权成功',
icon: 'none',
duration: 2000
})
}
})
}else{
wx.showToast({
title: '已授权相册',
icon: 'none',
duration: 2000
})
}
}
});
}
const photoWrite=(value,type)=>{
const authorList =uni.getAppAuthorizeSetting()
const result=authorList[value]
if(result=='authorized'){
return 0
}
if(result=='denied'){
wx.showToast({
title: type+'被拒绝,手动开启',
icon: 'none',
})
return 1
}
if(result=='not determined'){
wx.showToast({
title: type+'未授权',
icon: 'none',
})
return 2
}
}