翻了微信小程序官方文档,看了看画板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数据格式图片的更多相关文章

  1. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  2. 小程序canvas绘制纯色圆角区域 setdata数组某一项

    小程序canvas绘制纯色圆角区域: //方法: roundRectPath:function(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x ...

  3. 小程序canvas转base64方法 使用upng库 亲测没问题

    普通字符串base64编码转化可以使用原生的atob和btoa方法 图片转码:传统的图片转base64的方法可以采用FileReader的readAsDataURL()或canvas.toDataUR ...

  4. 小程序上传base64的图片,可上传多张

    微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...

  5. 小程序canvas绘制渐变色(简单入门)

    呀,曾经的我是那么的单纯,天真,粗略的翻了一遍小程序画布API,没有看见渐变色,就以为不支持渐变色 于是在项目中直接把原本的渐变色换成了单一颜色展示,发现很low啊 但是,自从上次小程序API文档更新 ...

  6. 微信小程序 canvas 绘制圆形状

    page({ // 绘制canvas drawCanvas:function(){ const ctx = wx.createCanvasContext('poster') // 画圆形二维码 thi ...

  7. 小程序canvas绘制倒计时

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 效果展示: //广告倒计时 advTimeCountDown:function(advTime ...

  8. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  9. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

随机推荐

  1. Android编程权威指南笔记2:解决R文件爆红问题和SDK概念

    在android studio中会遇到R文件的丢失,所以遇见这问题怎么解决呢? 重新检查资源文件中xml文件 最近一次编译时如果未生成R.java文件,项目中资源引用的地方都会出错.通常,这是某个xm ...

  2. 【CSGRound2】逐梦者的初心(洛谷11月月赛 II & CSG Round 2 T3)

    题目描述# 给你一个长度为\(n\)的字符串\(S\). 有\(m\)个操作,保证\(m≤n\). 你还有一个字符串\(T\),刚开始为空. 共有两种操作. 第一种操作: 在字符串\(T\)的末尾加上 ...

  3. js处理事件冒泡(兼容写法)

    event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event. ...

  4. Windows 文件过滤驱动经验总结

    Windows 文件过滤驱动经验总结作者:sinister 本文转载自驱动开发网 看了 ChuKuangRen 的第二版<文件过滤驱动开发教程>后,颇有感触.我想,交流都是建立在平等的基础 ...

  5. Mac OSX下增加TCP连接数

    查看 max files: $ sysctl -a | grep files kern.maxfiles = 12288 kern.maxfilesperproc = 10240 修改: $ sudo ...

  6. 测试winform自动悬浮

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  7. Error-ASP.NET:未能加载文件或程序集“CMSCalendar”或它的某一个依赖项。系统找不到指定的文件。

    ylbtech-Error-ASP.NET:未能加载文件或程序集“CMSCalendar”或它的某一个依赖项.系统找不到指定的文件. 1.返回顶部 1. “/”应用程序中的服务器错误. 分析器错误 说 ...

  8. VC 获取系统特殊文件夹的路径如:系统目录,桌面等

    转载:https://blog.csdn.net/qq_23992597/article/details/50963343 如果需要,请在StdAfx.h中添加 #include <shlobj ...

  9. Linux 提示更新密码

    You are required to change your password immediately (password aged)Last login: Thu Aug 22 17:04:01 ...

  10. [转] 2017年PHP开发者大会 鸟哥 (惠新宸@Laruence)精彩问答

    php7.1那个诡异的函数返回类型限定是如何考虑的? 鸟哥:没什么特别考虑,投票投出来的.首先说明一点,我投的是反对票.包括php的命名空间反斜杠我也是非常反对的,但可能由于我并没有对这方面太深的认识 ...