微信小程序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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
微信小程序实现登录注册功能
Dec 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
python设置检查点简单实现代码
2014/07/01 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
python负载均衡的简单实现方法
2018/02/04 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
就业协议书
2014/09/12 职场文书
英文感谢信格式
2015/01/21 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
第一军规观后感
2015/06/12 职场文书
公司酒会主持词
2015/07/02 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
Python 统计序列中元素的出现频度
2022/04/26 Python