微信小程序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 相关文章推荐
jQuery事件绑定和委托实例
Nov 25 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP时间和日期函数详解
2015/05/08 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
YUV转为jpg图像的实现
2019/12/09 Python
python使用Geany编辑器配置方法
2020/02/21 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
英文自我鉴定
2013/12/10 职场文书
自我鉴定写作要点
2014/01/17 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
python游戏开发Pygame框架
2022/04/22 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技