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

337 阅读 0 评论 223 点赞

我是靠谱客的博主殷勤大米，这篇文章主要介绍微信小程序canvas画图drawImage操作 base64 图片，现在分享给大家，希望可以做个参考。

说明：

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

背景：

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

解决思路：

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 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 () { },
})

画图调用：

复制代码

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

最后

以上就是殷勤大米最近收集整理的关于微信小程序canvas画图drawImage操作 base64 图片的全部内容，更多相关微信小程序canvas画图drawImage操作内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：微信小程序
浏览次数：337 次浏览
发布日期：2024-01-23 12:25:36
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_okf0_13_jk5.html

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

说明：

背景：

解决思路：

最后

评论列表共有 0 条评论

发表评论取消回复

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

说明：

背景：

解决思路：

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复