圆头像 微信小程序 绘图_小程序canvas绘制圆形微信头像
提示:canvas画布绘画图片的时候,图片不能是互联网图片,必需是本地图片才可以正常绘制。
第一步:获取客户受权,下载微信头像图片到本地。pleaseSign: function(event) { wx.getSetting({ success(res) { if (res.authSetting['scope.userInfo']) { // 已经受权,可以直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success: function(res) { let userInfo = res.userInfo; let userImage = userInfo.avatarUrl; wx.downloadFile({ url: userImage, success(wr) { let userName = userInfo.nickName; app.gData.userName = userName; app.gData.userImage = wr.tempFilePath; wx.navigateTo({ url: '../sign/sign' }); } }); } }); } } }); }
获取客户头像信息之后,跳转到绘制页面,在绘制页面完成绘画操作。
第二步:绘制客户头像。finish: function() { const ctx = wx.createCanvasContext('shareCanvas'); let that = this; ctx.drawImage(app.gData.BG, 0, 0, 600, 1066); ctx.stroke(); ctx.save(); // 绘制第一个圆 ctx.beginPath(); //圆心x、y的坐标,半径,起始角,结束角,顺时针画 ctx.arc(30 + that.data.xp - 70, 30 + that.data.yp - 30, 30, 0, Math.PI * 2, false); //将圆形剪切 ctx.clip(); //再画一个不存在的圆,避免画出来的微信头像有个黑圆圈 ctx.beginPath(); ctx.arc(0, 0, 0, 0, Math.PI * 2, false); ctx.drawImage(app.gData.userImage, that.data.xp - 70, that.data.yp - 30, 60, 60); ctx.stroke(); ctx.restore(); ctx.setTextAlign('left'); ctx.font = 'bold 25px 楷体'; ctx.setFillStyle(app.gData.fontColor); ctx.fillText(app.gData.userName, that.data.xp, that.data.yp + 10); ctx.stroke(); ctx.draw(false, function () { wx.canvasToTempFilePath({ x: 0, y: 0, width: 600, height: 1066, destWidth: 600, destHeight: 1066, canvasId: 'shareCanvas', success: function (res) { // 取得图片临时路径 app.gData.temp = res.tempFilePath; app.gData.change = true; wx.navigateBack(); } }); }); }
注意:在绘制客户头像之前肯定要调用save方法,绘制以后调用restore方法,否则你的绘制除了头像会成功画出来,其它绘画图片或者者文字会出不来。
绘画好客户头像之后的图片是这样的:
2.png
这部分代码是我一个已经上线的小程序【心语一刻】的代码片段,大家可以搜一下这个小程序具体体验一下流程。
3.png
love.png
圆头像 微信小程序 绘图_小程序canvas绘制圆形微信头像相关推荐
- 怎么申请微信小程序流程_小程序发布需要什么资质
申请微信小程序流程: 1.通过百度搜索"微信公众平台",打开公众平台网站按照页面提示注册好小程序账号. 2.注册认证好小程序账号后,开设小程序店铺需要使用到小程序商城系统.关于小程 ...
- 微信公众号发送小程序卡片_小程序、公众号客服消息可以发送小程序卡片啦
下面的样式,相信不少人都见过,却极少有人知道它叫什么↓↓↓ 这就是小程序卡片,它是微信小程序分享特有的样式.在微信聊天中,经常可以看到这样的样式. 点击小程序卡片就可以跳转到对应的小程序,简单粗暴的跳 ...
- android小程序案例_小程序案例赏析:高质量的小程序怎么做
很多新手想做小程序,但却不知道好的小程序应该做成什么样子.下面就跟大家分享几个做得比较好的微信小程序案例,你可以从这些案例中学习一下,然后再做自己的小程序. 1.商城小程序案例 商城小程序如今是比较常 ...
- audio 小程序 放大_小程序之争:支付宝、百度“放大招”,春节欲打突围战
2017年1月9日,微信小程序正式上线,上线后引发舆论热议.一年后,小程序再次凭借着小游戏大火,成功收获大量新用户. 如今,微信小程序已成为众多微信用户日常高频应用.腾讯之外,阿里.百度.今日头条等也 ...
- pyqt开发的程序模板_小程序定制开发和模板开发要多少钱?有什么区别?
到现在,小程序开发已经有了1年多的历史,已经达到百万数量级.无论是小程序商城还是小程序游戏,其开发方式不外乎两种,一种是定制开发,另一种是模板开发.对于很多初次接触小程序的客户来说,还不知道小程序的开 ...
- 小尼机器人_小尼被机器人嫌弃“唱歌难听,长相一般”?
我们如今所处的时代,科技创新的速度日新月异,生活方式多彩多姿.人人都说:科技改变了生活.今晚<开门大吉>也迎来了三大改变生活的神奇黑科技! 智能且生态的"移动城堡" 在 ...
- 用python画小仓鼠教程_小仓鼠简笔画教程
近期啊,在刷视频的时候啊,看见一个特别可爱的小松鼠,在吃东西!简直被萌坏啦!以前小时候啊,住在乡下,晚上的时候呢,经常听见小松鼠的叫声,经常就会带着一些小零食去喂松鼠,有一次,哥哥们抓住一只松鼠,激动 ...
- java小组队徽_小组队徽设计.ppt
小组队徽设计 小组队徽设计 制作团队:F7 小组商讨设计方案 小组各成员队徽设计草图 小组队徽设计问题 初期遇到的问题:对于色彩的搭配比较迷茫,关于色彩的问题一直无法确定,还有关于色彩的明暗问题如何给 ...
- 小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...
最新文章
- VS中stack around the variable ‘****‘ was corrupted堆栈被破坏
- python解决open()函数、xlrd.open_workbook()函数文件名包含中文,sheet名包含中文报错的问题
- python错误解决方案之关于报urllib2.HTTPError: HTTP Error 401: Unauthorized错误问题
- 1.解读REST和JAX-RS
- 实习技术员的基本功(四)
- 公司的一些SEO面试题
- pymysql 增删改 查 索引
- shutdown小程序
- php返回一个变量,PHP从另一个文件获取变量
- Nginx/Apache发大招
- zznu 1996 : 正三角形和圆的爱情
- PyCharm远程链接矩池云
- 《计算机视觉:模型、学习和推理》一3.1 伯努利分布
- 浏览器向服务器发送的消息称为,网络是怎样连接之浏览器的探索之旅读书笔记(一)...
- CAD如何一键解决批量打印
- PS教程新手入门(一)--去除图片上文字的方法(6种)
- mysql select 列名_Mysql查询出所有列名
- idea jsp mysql
- 还在吐槽翻译的外版书质量差吗?谈谈我个人的理解
- java基于ssm的道路求援车队管理系统