我们的需求是动态生成一个含有微信头像的图片作为分享图片。

我们在页面中添加cancas

<view style='position:absolute;left:400rpx;'><canvas  canvas-id='ttcanvas' style='height:240px;width:320px;position:absolute;left:400rpx;'><!-- <view class='colorpic'><view class='pictit'><image src='{{scanConfig.userInfo.avatar}}'></image></view><view class='picblock'><image src='../images/ttshare.png'></image><text>{{gameConfig.myScore}}</text></view><view  class='pictext'><image src='../images/qiubai.png'></image></view></view>   --></canvas></view>

首先我我第一步想的是我在canvas里面写标签，添加进去，我就可以OK了！（我是个小白，程序小白），事实上！不可能的！！canvas导出图片怎么可能支持你在里面写标签，标签的东西完全不在画布里面好嘛！

好吧，接下来我开始了手动画canvas之路。

var contex = wx.createCanvasContext('ttcanvas');//ttcanvas为该canvas的ID//var contex = ctx.getContext('2d');var avatarurl_width = 300;//这个是画布宽var avatarurl_heigth = 240;//这个是高var avatarurl_x = 50;var avatarurl_y = 50;// contex.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);//这个地方我画了个头像的圆// contex.clip();contex.drawImage('../images/share.jpg', 0, 0, avatarurl_width, avatarurl_heigth); // 这个是我的背景图片，本地的！contex.restore();contex.save();contex.beginPath(); //开始绘制contex.arc(150, 50, 30, 0, Math.PI * 2, false);contex.clip();//contex.arc(25, 25, 25, Math.PI * 2, false);//contex.clip();contex.drawImage(self.data.locolurl, 120, 20, 60, 60);contex.restore();contex.setFontSize(20)contex.fillStyle = "#fff";contex.fillText(self.data.gameConfig.myScore, 130, 132)contex.restore();contex.draw(true, setTimeout(function () {wx.canvasToTempFilePath({//导出图片width: 300,height: 240,destWidth: 300,destHeight: 240,canvasId: 'ttcanvas',success: res => {console.log(res.tempFilePath)self.data.shareurl = res.tempFilePath;self.setData(self.data);}},this)}, 100))

好了，通过以上代码我成功绘制了一个含有头像的canvas，并导出图片到了默认路径，也就是上述路径的shareurl里面！

 onShareAppMessage: function () {var self=this;return{title: '抬头',desc: '分享描述',path: '分享后的打开路径',imageUrl:self.data.shareurl,success:function(res){console.log(res)}}},

好啦！接下来我们点击分享就OK了吧！

你以为好了么！

太天真的，你会发现模拟器OK了，真机完全加载不出来头像的好嘛！！！

好吧，没有办法我就开始了踩坑之路，到底怎么办才能动态生成还有微信头像的图片，还可以让真机可以显示呢！

第一步，你需要把微信头像下载到本地路径，这个下载的时候有一个坑请注意，你下载头像的时候会产生这样一个问题

你会发现，你没办法下载下来，主要是因为微信小程序对于你下载的地址有规定。

首先你需要登录https://mp.weixin.qq.com，没错账号密码就是你小程序绑定的邮箱号和密码

然后选择最下面的设置downloadFile合法域名，把微信头像的下载链接添加到下面就可以了

第二步，下载这个图片，代码如下

wx.downloadFile({url:'你头像的网络地址'，success: res => {// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容if (res.statusCode === 200) {this.setData({locolurl: res.tempFilePath//将下载下来的地址给data中的变量变量});}}, fail: res => {console.log(res);}});

第三部调用这个本地地址，看得仔细的小伙伴可以看得出来我的第一段代码中的手绘canvas中已经引入了该本地路径地址了。

好了，这样功能就可以实现了！

最后一点提醒！！！

canvas默认是最高层级在页面最前面，当你把canvas设置为不显示的时候是不能导出图片的，我的做法是直接绝对定位扔屏幕外面了，简单粗暴！

这是我第一次写博客，如果有错误欢迎大佬们批评指正！如果觉得写的不错，可以口头鼓励一下，谢谢大家！

微信小程序-使用canvas生成含有微信头像的图片并分享相关推荐

微信小程序使用canvas生成分享海报功能复盘
前言近期需要开发一个微信小程序生成海报分享的功能.在h5一般都会直接采用 html2canvas 或者 dom2image 之类的库直接处理.但是由于小程序不具备传统意义的dom元素,所以也没有办法 ...
微信小程序利用canvas生成海报-------图片为网络图片
根据我们老总的业务需求,迫不得已,我做了这个canvas绘制的海报,感觉基本上可以解决现在海报所遇到的大部分问题了,献给那些没有做过的小伙伴们,话不多说,先上我做的效果上代码 <style&g ...
微信小程序使用canvas绘图，圆形头像，网络背景图，文字，虚线，直线
<canvas type="2d" id="shareCanvas0" style="height: 1196rpx;width:578rpx; ...
微信小程序业务-字符串生成二维码（weapp-qrcode）
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言邂逅weapp-qrcode 基本使用详细参数小程序组件中使用 image属性详解想使用网络图片? 参考地址前言在小程序项 ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序使用weapp-qrcode生成二维码
<canvas style="width:108rpx;height:108rpx; canvas-id='qrcode'></canvas> // weapp-qr ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...

微信小程序-使用canvas生成含有微信头像的图片并分享

你以为好了么！

最后一点提醒！！！

微信小程序-使用canvas生成含有微信头像的图片并分享相关推荐

最新文章

热门文章