利用云开发优化博客小程序(三)——生成海报功能
欠下的生成海报的功能终于补上了 周末花了点时间把小程序版博客中的生成海报的功能给完成了,对于新手的我来说遇到的问题还是挺多的,这里简单记录下坑。 首先看下效果图: 思路还是比较简单,主要就是利用微信提供的画布? 主要涉及小程序画布和图片相关的API,若是不太熟悉的话可以优先参考下文档。 资源准备首先需要准备构成海报的一些资源,比如文章的首图,标题,需要分享的小程序码。对于文章的首图,是从腾讯云的对象存储中获取,需要在开发设置中配置好? 获取图片可直接通过? wx.getImageInfo({
src: url,success (res) {
console.log(res.path)
}
})
至于小程序码,目前使用的是小程序本身的,暂时没有动态生成,后期会迭代。直接将小程序码上传至云存储上,获取时也比较简单: wx.cloud.downloadFile({
fileID: fileID
}).then(res => {
console.log(res.tempFilePath)
})
最后,其他需要在海报上展现的内容,根据实际情况进行获取。 生成海报资源准备完之后,就需要利用画布进行构造海报了。 在wxml添加canvas元素,需要注意的是避免在页面上展示,可以将位置设置在屏幕之外,比如?
<view class="canvas-box">
<canvas style="width: 600px;height: 970px;" canvas-id="mycanvas" />
view>
然后需要了解下canvas相关API和属性了。 优先创建canvas的绘图上下文? var context = wx.createCanvasContext('mycanvas');
context.setFillStyle('#ffffff');//设置填充色
.fillRect(0,600,0);">970);//填充一个矩形。用 setFillStyle 设置矩形的填充色
.drawImage(postImageLocal,0);">300); //绘制首图
.drawImage(qrcodeLoal,0);">210,0);">650,0);">180,0);">180); //绘制二维码
.setFillStyle("#000000");
.setFontSize(20);//设置字体大小
.setTextAlign('center');//设置字体对齐
.fillText("阅读文章,请长按识别二维码",0);">300,0);">895);
.beginPath() //分割线
.moveTo(30,0);">620)
.lineTo(570,96);">.stroke();
.setTextAlign('left');
40);
if (title.lengh <= 12) {
.fillText(title,0);">40,0);">360);//文章标题
} else {
.fillText(title.substring(12),0);">360);
12,0);">26),0);">410);
}
20);
if (custom_excerpt26) {
.fillText(custom_excerpt,0);">470);//文章描述
} .fillText(custom_excerpt470);
26,0);">50) + '...',0);">510);
}
.draw();
这里需要注意的是填写文字时,画布是不会自动换行的,所以这里需要根据字体大小和字体多少来自行控制换行。 在填充完canvas之后,通过? wx.canvasToTempFilePath({
canvasId: 'mycanvas',success: function(res) {
var tempFilePath = res.tempFilePath;
wx.hideLoading();
console.log("海报图片路径:" + res.tempFilePath);
that.setData({
showPosterPopup: true,//展示弹窗
showPosterImage: res.tempFilePath //对应路径
})
},fail: function(res) {
console.log(res);
}
});
到这里,最简单的海报生成完成了,接下来就是涉及交互了。 交互样式首先利用zanui的? 弹出层中加载生成好的海报图片,通过按钮引导用户保存至本地相册,在保存相册时,需要用户授权本地相册的权限,这里需要做好交互,当用户拒绝之后再次想保存时,让他重新授权。 当用户取消时,再次提醒: 具体代码如下,供参考: /**
* 保存海报图片
*/
savePosterImage: function() {
let that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.showPosterImage,success(result) {
console.log(result)
wx.showModal({
title: '提示',content: '二维码海报已存入手机相册,赶快分享到朋友圈吧',showCancel: false,51); font-weight: 700;">function(res) {
that.setData({
showPosterPopup: false
})
}
})
},51); font-weight: 700;">function(err) {
console.log(err);
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
"再次发起授权");
wx.showModal({
title: '用户未授权',0);">'如需保存海报图片到相册,需获取授权.是否在授权管理中选中“保存到相册”?',51); font-weight: 700;">function(res) {
if (res.confirm) {
'用户点击确定')
wx.openSetting({
success: function success(res) {
'打开设置',res.authSetting);
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
'获取保存到相册权限成功');
} else {
'获取保存到相册权限失败');
}
}
})
}
});
}
}
})
}
}
});
}
到这里,小程序的生成海报功能基本上就完成了。 总结其实生成海报的功能还有很多小问题,由于最近项目比较紧匆匆上了,后面找时间会优化。 通过生成海报的功能,主要还是学习了画布的API,并通过实战也基本可以上手canvas,至于画布上排版,样式就需要自己耐心了,尤其是一些小地方。 程序上线后我才发现,海报上的标题,由于有中英文,所占的字符不同,所以换行的处理过于草率了,导致有英文的标题在位置上存在偏差。 后期有空的话再持续改善吧~ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- HTML – 是否可以仅在移动设备上使用Twitter Bootstraps .n
- active-directory – 如何判断今天是否使用了某个Active Di
- html – 影响div:悬停与另一个div
- javascript – 在img.onload上留下处理程序是内存泄漏?
- Text2wave节日不能通过nginx php exec工作
- html – 滚动到页面底部后,Bootstrap词缀停止工作
- glassfish – asadmin create-domain失败:所有端口都在使用
- JQuery EasyUI 日期控件如何控制日期选择区间
- 微信小程序自定义组件封装及父子间组件传值的方法
- 微信小程序 自定义消息提示框