微信小程序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 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 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
漂亮但不安全的CTB
2006/10/09 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php加密解密字符串示例
2016/10/13 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Python设置默认编码为utf8的方法
2016/07/01 Python
Python 处理数据的实例详解
2017/08/10 Python
详解python分布式进程
2018/10/08 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
民事诉讼代理授权委托书
2014/10/11 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
父亲节寄语大全
2015/02/27 职场文书
农业项目投资意向书
2015/05/09 职场文书
埃及王子观后感
2015/06/16 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
SpringAop日志找不到方法的处理
2021/06/21 Java/Android