由于小程序上的限制,目前很多线上小程序要通过生成分享图片,没有长按识别图中二维码功能的阉割,最后得保存到相册然后来分享给用户…
小程序的canvas画布绘图与h5的canvas有类似的功能,应用场景大多数是用于制作分享图,模块上有:文字、图片、图形等等变量时,因为只有图片才能保存到相册,所以得先把这些模块合成为一张图片,此时canvas就能显示它的强大功能了。
具体可查阅官方小程序[canvas组件的api]的使用;
注意事项:
- canvas生成图片,cit.draw()完毕后,要wx.canvasToTempFilePath 保存图为临时地址才行的哦…
- 我现在用的图是本地资源的,若你的图片用的是网络资源先 wx.getImageInfo,否则你的图片无法显示。
- 图片为网络资源请用真机测试喲~
本案例还增加了切换卡片的功能,可忽略,不过这里配合了canvas的操作,也可以参考一下;
先看效果图:
(个人设计),按个人的需求来吧,基本上一张图都会有以下的模块内容…
生成的图片(下面的我手机保存出来的的图片,是非常清晰的)
不同手机的像素密度是不一样的,所以生成时要注意 *[屏幕像素密度],防止生成的图片是固定大小和模糊的…
js功能:
//canvas画图
drawCanvas(e) {
let that = this;
/* 创建 canvas 画布 */
const ctx = wx.createCanvasContext('myCanvas')
ctx.drawImage(that.data.cardImgSrc, 0, 0, that.data.width, that.data.imgHeight)
ctx.rect(0, that.data.imgHeight, that.data.width, that.data.height - that.data.imgHeight)
ctx.setStrokeStyle('#ffffff')
ctx.setFillStyle('#ffffff')
ctx.fill()
ctx.drawImage(that.data.xcxEwm, that.data.ewmLeft, that.data.ewmTop, that.data.ewmWidth, that.data.ewmWidth)
ctx.setFillStyle('#333')
ctx.setFontSize(12)
ctx.setTextAlign('left')
ctx.fillText('我是' + that.data.userInfo['nickName'] + '', that.data.pdWidth, that.data.pt1)
ctx.setFontSize(11)
ctx.fillText('邀请你和我一起旅行!', that.data.pdWidth, that.data.pt2)
ctx.setFillStyle('#999')
ctx.setFontSize(8)
ctx.fillText('长按二维码,开启你的旅行之路', that.data.pdWidth, that.data.pt3)
/* 绘制 */
ctx.stroke()
ctx.draw()
},
//将绘制后的canvas保存为图片
canvasToPath() {
let that = this;
that.drawCanvas();
//加个定时器,防止图为黑屏
setTimeout(function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.width,
height: that.data.height,
destWidth: that.data.width * that.data.pixelRatio, //乘以像素比,防止模糊
destHeight: that.data.height * that.data.pixelRatio,
canvasId: 'myCanvas',
success(res) {
console.log(res.tempFilePath)
that.setData({
poster: res.tempFilePath,
})
wx.nextTick(() => {
that.saveCanvasImage();
})
}
})
}, .1e3);
},
// 保存图片方法
saveCanvasImage() {
let that = this;
wx.saveImageToPhotosAlbum({
filePath: that.data.poster,
success: (res) => {
console.log(res)
wx.showToast({
title: '保存成功'
});
},
fail: (err) => {
console.log(err)
}
})
},
// 点击保存图片到相册(授权)
saveImageToPhotos() {
let that = this;
// 相册授权
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.canvasToPath();
},
// 拒绝授权时,则进入手机设置页面,可进行授权设置
fail() {
console.log('拒绝授权');
wx.showModal({
title:'授权失败',
content:'请允许”保存图片到相册“后,才可以把分享图保存到手机相册哦~',
showCancel:false,
success(res) {
if (res.confirm) {
wx.openSetting({
success: (ret) => {
if(ret.authSetting['scope.writePhotosAlbum']){
that.canvasToPath();
}else{
//返回-回调
if (that.isCancleCallback){
that.isCancleCallback(ret);
}
}
}
})
}
}
})
}
})
} else {
// 已授权则直接进行保存图片
that.canvasToPath();
}
},
fail(res) {
console.log(res);
}
})
},
源码会持续更新到公众号,需要可以关注一下哦…