微信小程序canvas画图drawImage操作 base64 图片

说明：

      在微信小程序中canvas  drawImage()传入的第一个参数是 imageResource 图片资源路径，这个参数通常由从相册选择图片 wx.chooseImage 或 wx.getImageInfo 获取图片信息来获得。

背景： 

     base64 格式图片数据，无法被 getImageInfo 直接调用

解决思路：

1. 首先使用  wx.base64ToArrayBuffer 将 base64 数据转换为 ArrayBuffer 数据；（ps: getwxacodeunlimit 返回的分享小程序码就是ArrayBuffer数据）
2. 使用  FileSystemManager.writeFile  将 ArrayBuffer 写为本地用户路径的二进制图片文件;
3. 此时的图片文件路径在 wx.env.USER_DATA_PATH 中， wx.getImageInfo 接口能正确获取到这个图片资源，并且 drawImage 也可直接调用该图片资源 ；

ps：图片文件不带base64编码的头信息data:image/png;base64,

 wx.request({
url: app.globalData.apiUrl + '/app/member_createcode',
data: {
scene: "shareuser="+that.data.uid,
page: "pages/index/index"
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
responseType: 'arraybuffer',
success: function (res) {
var url = wx.arrayBufferToBase64(res.data); //服务器回给的getwxacodeunlimit分享小程序码
that.setData({
sharecode: url,
isshow: true
})
var fsm =
wx.getFileSystemManager();
var filePath = wx.env.USER_DATA_PATH + '/share_img.png';
var buffer = res.data;
fsm.writeFile({
filePath: filePath,
data: buffer,
encoding:"binary",
success() {
that.setData({
savecode:filePath
})
},
})
},
fail: function () { },
})

画图调用：

var ctx = wx.createCanvasContext('myCanvas');
ctx.drawImage(that.data.savecode, 295, 686, 160, 160);

最后

以上就是殷勤大米为你收集整理的微信小程序canvas画图drawImage操作 base64 图片的全部内容，希望文章能够帮你解决微信小程序canvas画图drawImage操作 base64 图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。