微信小程序canvas绘制圆角base64图片的实现


Posted in Javascript onAugust 18, 2019

接口返回base64格式小程序二维码,以往的做法是需要再调一个接口去拿到jpg/png格式的图片。如果没有这个接口呢,是不是也可以?然而小程序canvas并不支持直接使用base64绘制,好在小程序的文件系统提供了方法,可以把base64经过进一步处理转成本地图片。

获取base64格式图片

getXcxQrcode() {
 wx.request({
 url: app.globalData.globalUrl + "/get_wx_code",
 data: {
 token: app.globalData.weixin_token,
 scene: app.globalData.page_key,
 page: "pages/index/index"
 },
 success: (res) => {
 if (data.data.success) {
  this.base64src(data.data)
 }
 }
 })
}

base64格式图片转换成本地图片

base64src(base64data) {
 const filePath = `${wx.env.USER_DATA_PATH}/tmpbase64.png`;
 const buffer = wx.base64ToArrayBuffer(base64data.buffer);
 let that = this;
 fsm.writeFile({
  filePath,
  data: buffer,
  encoding: 'binary',
  success() {
   that.setData({
    qrcodeUrl: filePath // 得到http://usr/tmpbase64.png
   })
  },
  fail() {
   reject(new Error('ERROR_BASE64SRC_WRITE'));
  },
 });
},

使用获得的本地图片绘制圆角二维码

var qrW = 150; //绘制的二维码宽度
var qrH = 150; //绘制的二维码高度
var qr_x = 540; //绘制的二维码在画布上的位置
var qr_y = 960; //绘制的二维码在画布上的位置
ctx.save();

ctx.beginPath(); //开始绘制
//先画个圆  前两个参数确定了圆心 (x,y) 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针
ctx.arc(qrW / 2 + qr_x, qrH / 2 + qr_y, qrW / 2, 0, Math.PI * 2, false);

ctx.clip(); //画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
ctx.drawImage(this.data.qrcodeUrl, qr_x, qr_y, qrW, qrH);
ctx.draw()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
Angular5.1新功能分享
Dec 21 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
JS实现拼图游戏
Jan 29 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 #Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 #Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 #Javascript
详解ES6 Promise的生命周期和创建
Aug 18 #Javascript
vue-cli3配置与跨域处理方法
Aug 17 #Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 #Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 #Javascript
You might like
php防攻击代码升级版
2010/12/29 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python 错误处理 assert详解
2020/04/20 Python
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
广州盈通面试题
2015/12/05 面试题
爱情保证书大全
2014/04/29 职场文书
捐书活动总结
2014/05/04 职场文书
医学生求职信
2014/07/01 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
幸福终点站观后感
2015/06/04 职场文书
小学感恩主题班会
2015/08/12 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python