Canvas绘图在微信小程序中的应用:生成个性化海报
一、Canvas应用的背景(个人理解)及基础语法背景从2012年开始,微信那个时候用户的积累的量已经非常大了,推出公众号,当然大屏智能手机在那个时候也流行,传统的大众媒体逐步消亡,像微信公众号这样的新媒体盛行。企业的广告投入开始从电视等传统媒体向基于圈层文化的新媒体精准营销转移,甚至很多企业尤其互联网企业开始思考如何利用用户的自传播这种方式去宣传企业、实现商业目标。而用户的自传播很好的途径就是生产个性化的海报。举个最常见的例子,我第一次使用Keep是因为在朋友圈看到朋友分享她运动量的一个截图,当时在我看来非常酷,有心率脉搏呀、时速运动量啊、消耗的卡路里等,还有一个二维码,然后我就点了下载了Keep,这整个获客成本几乎为0,秒秒钟就多了一个用户。而实现这一过程的技术手段就可以用canvas。所以,canvas的盛行,与企业的精准营销和用户的自传播有很大的关系。 大家看第一张图的话是在2017年末的时候,Qcon全球软件开发大会预热阶段的海报。然后我们为程序员做了一个生成2018年关键字的一张海报,文案都非常有趣啊。第二张的话是在2018年元旦的时候做的极客时间助手,这个小程序当初主要是为程序员做的2018年新年签。那面就是一些极客时间的专栏,包括用户留言,你留言随手可以生成一张海报,可以转发等等大概就是这样。 基础语法Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为300像素×150像素(宽×高,像素的单位是px),通过JavaScript上下文对象动态创建图像。比如,画线、画矩形、涂颜色甚至生成带二维码的海报。原理就是一笔一笔的画,画一条横线,再画一条横线等等,就是不断地创建路径、绘制路径,然后把这个路径封闭起来可以涂色之类的,他的底层的封装就是放到一个数组里形成一个路径的数组,将这个数组传到js底层的一个方法,然后去绘制。
首先,你需要把这张图片画canvas上面,比如说你画你这个头像就是正方形,就在(0,0)开始画一个图片。那么你在这个图片的中心,作为原点,然后你画一个圆形。然后你再利用canvas语法画一个圆弧,在这个圆弧路径以外设置不可见以内设置可见,这个时候就形成了一个圆形头像。
二、常用的"生成海报"的方式我们会经常在朋友圈看到什么算命、性格分析、测算你的智商、情商等等这些东西,都是由用户分享出一张图片(海报),这个图片就是用canvas做成的,上面画了二维码,二维码是一个数组两个或循环嵌套画小黑点用户识别这个二维码之后就进入他的程序,经过程序跑出来的测试结果啊什么的,点保存的时候,就会生成一张个性海报明白。怎么生成这种个性化海报呢? 2.1 字符串模板此处应有案例 主要实现:与服务端约定好数据格式-->前端做好模板-->服务端用第三方工具渲染返回到客户端img 2.2 canvas绘制案例:?'极客时间小助手'小程序 wx.canvasToTempFilePath({
x: this.data.screenWidth,height: this.data.screenHeight,destWidth: this.data.screenWidth * this.data.pixelRatio,// pixelRatio为设备的像素比
destHeight: this.data.screenHeight * this.data.pixelRatio,canvasId: "canvasid",success: function(e) {
console.log(e)
this.setData({
bjtempFilePath: e.tempFilePath // 拿到要保存的图片路径
},function() {});
},fail: function(e) {
console.log(e);
}
})
onUserSaveImageRight: function () {
console.log("-click-");
var _this = this;
if (!wx.saveImageToPhotosAlbum) return wx.showModal({
title: "提示",content: "当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。"
}),void "version low");
wx.getSetting({
success: function (res) {
res.authSetting["scope.writePhotosAlbum"] ? ("1-已经授权《保存图片》权限"),_this.saveimgfn()) : wx.authorize({
scope: "scope.writePhotosAlbum",success: function () {
"用户对相册-授权成功"),_this.saveimgfn();
},fail: function () {
wx.showModal({
title: "请您授权保存到系统相册",showCancel: !1,success: function (res) {
res.confirm && wx.openSetting({
success: function (res) {
res.authSetting["scope.writePhotosAlbum"] ? setTimeout(function () {
_this.saveimgfn();
},128);">500) : wx.showModal({
title: "您未授权,无法将海报保存到相册,你可以截屏得到海报,或者再次点击'保存海报'按钮并授权",128);">1
});
}
});
}
});
}
});
}
});
},saveimgfn: function () {
var filePath = this.data.bjtempFilePath;
console.log(filePath),filePath ? wx.saveImageToPhotosAlbum({
filePath: filePath,success: function (res) {
wx.showToast({
title: "保存成功",icon: "success",duration: 1500
});
},fail: function () {
wx.showToast({
title: "保存失败",68);">"fail",128);">1500
});
}
}) : this.saveImage()
三、极客时间小程序-生成各种海报的解决方案微信小程序canvas与HTM5的canvas对比
var rpx;
//获取屏幕宽度,获取自适应单位
wx.getSystemInfo({
success: function(res) {
rpx = res.windowWidth/750
},})
// 在绘制方法中将参数乘以相对单位即可实现自适应
const s = wx.createCanvasContext("canvas")
s.drawImage(Url,128);">265 * rpx,128);">262.5 * rpx)
如何导出高清海报、如何封装; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |