小程序canvas绘制base64数据格式图片
翻了微信小程序官方文档,看了看画板drawImage的用法,官方对所要绘制的图片资源路径并没有很详细,模棱两可,没说支持什么格式的路径。今天我就试一下支不支持base64格式的图片

随便找张图片从网上base64转化

小程序绘制功能着实搞好了

剩下就是将所要绘制的图片资源替换成base64数据了,然后再工具上看效果

绘制效果在工具上虽然是正常的,可是到了真机调试,就不正常了,啥都没有

base64格式的图片在真机调试上无用,真是郁闷,不能直接渲染,那只好将base64图片转化网络图片了,怎么转就是个问题了。
如何做?这就需要用到微信的文件系统了!将base格式图片放到暂存文件中,改为新的路径
方法如下:
//将base64图片转网络图片
send_code(code) {
/*code是指图片base64格式数据*/
//声明文件系统
const fs = wx.getFileSystemManager();
//随机定义路径名称
var times = new Date().getTime();
var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png'; //将base64图片写入
fs.writeFile({
filePath: codeimg,
data: code.slice(22),
encoding: 'base64',
success: () => {
//写入成功了的话,新的图片路径就能用了
this.huizhi({},codeimg);
}
});
},
瞧瞧真机上的效果:

大功告成!需要源码的,可前往
https://github.com/murenziwei/wx-canvas-base64.git
小程序canvas绘制base64数据格式图片的更多相关文章
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- 小程序canvas绘制纯色圆角区域 setdata数组某一项
小程序canvas绘制纯色圆角区域: //方法: roundRectPath:function(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x ...
- 小程序canvas转base64方法 使用upng库 亲测没问题
普通字符串base64编码转化可以使用原生的atob和btoa方法 图片转码:传统的图片转base64的方法可以采用FileReader的readAsDataURL()或canvas.toDataUR ...
- 小程序上传base64的图片,可上传多张
微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...
- 小程序canvas绘制渐变色(简单入门)
呀,曾经的我是那么的单纯,天真,粗略的翻了一遍小程序画布API,没有看见渐变色,就以为不支持渐变色 于是在项目中直接把原本的渐变色换成了单一颜色展示,发现很low啊 但是,自从上次小程序API文档更新 ...
- 微信小程序 canvas 绘制圆形状
page({ // 绘制canvas drawCanvas:function(){ const ctx = wx.createCanvasContext('poster') // 画圆形二维码 thi ...
- 小程序canvas绘制倒计时
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 效果展示: //广告倒计时 advTimeCountDown:function(advTime ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- [技术博客]海报图片生成——小程序canvas画布
目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...
随机推荐
- K8s无状态控制器原理介绍
Pod控制器: ReplicationController:早期K8s只有这一个控制器,但后来发现让这一个来完成所有任务,太复杂.因此被废弃. ReplicaSet: 它用于帮助用户创建指定数量的Po ...
- planning algorithms chapter 1
chapter 1 介绍 什么是规划? 在机器人领域,运动规划和轨迹规划主要用来解决"怎么移动钢琴"的问题,这个问题是如何将钢琴从一个房间移动到另一个房间,并且保证钢琴不和其他事物 ...
- 一个bug程序员的入园
大家好,我叫dg是一个只写bug的程序员.当然只写bug也是有好处的,那就是踩过的坑多了,摔的跟斗多了,并且没有被摔死,勇敢的活了下来,练就了一身钢筋铁骨.哈哈,开个玩笑.但是猜的坑多了就知道了哪里有 ...
- C语言之“字符”与“字符串”之间的区别解析
在C语言中,“字符”与“字符串”之间,是有区别的.这一篇文章中,我们将介绍一下,在C语言中的“字符”与“字符串”,它们之间的区别. 首先,一个很明显的区别是: “字符”,使用单引号作为定界符,而“字符 ...
- 冰多多团队-第九次Scrum例会
冰多多团队-第九次Scrum会议 工作情况 团队成员 已完成任务 待完成任务 zpj debug, IAT debug, IAT 牛雅哲 debug, IAT 接通新的语音识别接口和termux,完成 ...
- MYSQL定时任务-定时清除备份数据
背景 由于项目需要,每个月的历史存量数据需要进行一个归档和备份操作,以及一些日志表需要进行一个明细字段清除,让mysql数据库磁盘节省空间.则需要一些定时任务来定时清理这些数据. 技术选型 Java ...
- odoo开发学习「目录」
目录: 一.odoo介绍(发源 版本 ERP对比 优势劣势 应用场景 发展情况 社区介绍) 二.odoo设计思想 三.odoo自带模块 四.odoo开发前准备(python基础) 五.odoo环境搭建 ...
- zabbix使用自动发现功能批量监控服务器端口的可用性
使用自动发现脚本批量监控服务器端口的可用性 .编写自动发现脚本 # cat /usr/local/zabbix_agents_3.2.0/scripts/web_site_code_status.sh ...
- 使用 Laravel-Swagger 编写接口文档(php)
使用 Laravel-Swagger 编写接口文档 Table of Contents Swagger 文档管理 官方网站:https://swagger.io/ 快速编写你的 RESTFUL API ...
- 动手制作 java版本切换 多版本JDK安装 windows JDK版本 切换
[参考]windows下JDK版本之间的切换 1.下载各版本安装包,指定安装位置顺序安装 2.删除注册表,文件和环境变量 文件: C:\Windows\System32 下java相关文件如 jav ...