微信小程序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 相关文章推荐
图片之间的切换
Jun 26 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
js创建元素(节点)示例
Jan 02 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php字符集转换
2017/01/23 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
XP折叠菜单&仿QQ2006菜单
2006/12/16 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python sys.argv[]用法实例详解
2018/05/25 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
django使用LDAP验证的方法示例
2018/12/10 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
J2EE模式面试题
2016/10/11 面试题
大学生村官典型材料
2014/01/12 职场文书
10的分与合教学反思
2014/04/30 职场文书
公司应聘求职信
2014/06/21 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
公司内部升职自荐信
2015/03/27 职场文书
廉政承诺书范文
2015/04/28 职场文书
三八节祝酒词
2015/08/11 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server