小程序像素单位是rpx，而canvas用的是px ,在这里我先用 wx.getSystemInfo 去获取屏幕的width，写一个获取屏幕比例函数,代码如下
var getRatio=()=>{
let w=0
wx.getSystemInfo({
success: function (res) {
w = res.windowWidth / 375;//按照750的屏宽
},
})
return w
}
继续下一步：
此处代码则是自己使用canvas画出海报，此步省略，注意你已经获取了 屏比 ，你在画的时候只要乘以getRatio()就能解决海报在不同屏幕的大小，
const ctx = wx.createCanvasContext('myCanvas')
.......
.....
....
继续下一步需要生成海报图，代码如下：
首先获取手机权限：
wx.getSetting({
success: (res) => {
if (typeof res.authSetting['scope.writePhotosAlbum'] == 'undefined') {
// 未授过权
wx.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
this.getPic()
}
});
} else if (res.authSetting['scope.writePhotosAlbum'] === false) {
wx.showModal({
title: '提示',
content: '保存失败，请开启相册权限保存？',
success: res => {
if (res.confirm) {
// 已拒绝过授权，则打开设置界面引导用户开启授权
wx.openSetting({
success: res => {
if (res.authSetting['scope.writePhotosAlbum']) {
this.getPic()
}
}
});
} else if (res.cancel) {
// console.log('用户点击取消')
}
}
})
} else {
this.getPic()
}
}
})
获取到用户相机权限之后需要使用wx.canvasToTempFilePath生成图片并且需要生成本地图片（这里是小程序的限制，下载图片不支持网络图）,代码如下：
getPic() {
wx.showToast({
title: '海报保存中...',
icon: 'loading',
duration: 2000,
mask:true
});
setTimeout(() => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 750,
height: 1334,
destWidth: 750,
destHeight: 1334,
quality: 1,
canvasId: 'myCanvas',
fileType: 'png',
success: res => {
//生成本地图
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res => {
wx.hideLoading();
wx.showToast({
title: '保存成功',
});
},
fail() {
wx.hideLoading()
}
})
}
})
}, 500);
}
注：此内容是我在项目中稍做一个记录，便以日后开发提供快速的思路,如果有帮到你不胜荣幸
网友评论