小程序
小游戏
企业微信
微信支付
扫描小程序码分享
小程序chooseImage时如何把图片转换成base64
44 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
wx.createCanvasContext配合开源库UPNG对原始图像数据进行png编码。
这位大兄弟写得很详细https://github.com/zh8637688/wx-cardscanner。他使用的是腾讯AI接口，但是都是将图片数据转为base64后上传。
具体代码如下，记得引入UPNG.js和pako.min.js文件。
//画布
setCanvac:
function
(){
var
canvasID =
"mycanvas"
;
canvas = wx.createCanvasContext(canvasID)
// 1. 绘制图片至canvas
imgPath =
this
.data.imageInfo.path;
imgWidth =
.data.imageInfo.width;
imgHeight =
.data.imageInfo.height;
arry =
.data.imageInfo.path.split(
"."
);
prefix = arry[arry.length-1];
prefix =
"data:image/"
+ prefix+
";base64,"
that=
canvas.drawImage(imgPath, 0, 0, imgWidth, imgHeight)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(
false
, () => {
// 2. 获取图像数据， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: imgWidth,
height: imgHeight,
success(res) {
// 3. png编码
if
(platform ==
'ios'
) {
// 兼容处理：ios获取的图片上下颠倒
res = that.reverseImgData(res)
}
pngData = upng.encode([res.data.buffer], res.width, res.height);
// 4. base64编码
base64 = wx.arrayBufferToBase64(pngData);
//base64 = prefix + base64;
//console.log(base64);
//上传文件的方法，自己写一个就好
that.upLoadImage(base64);
})
},
//ios图片处理
reverseImgData(res) {
w = res.width
h = res.height
let con = 0
for
(
i = 0; i < h / 2; i++) {
j = 0; j < w * 4; j++) {
con = res.data[i * w * 4 + j]
res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
res.data[(h - i - 1) * w * 4 + j] = con
return
res
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
正确的姿势应就像这样：不要把获取像素信息放在chooseImage里
而是要等canvas生成完图片之后，
再去获取像素信息。
但是，把合成的base64图片放到image标签里，在编辑器里显示，在真机上不显示，求解。我用的是安卓手机。
你可以看下这位同学写的：https://blog.csdn.net/qq_36875339/article/details/81086205
时间长了，这些快忘了，你往上找下，就可以找到这位同学了，你们可以交流下，
const fs = wx.getFileSystemManager() // 读取文件， base64 格式 let base64Str = fs.readFileSync(this.data.avatarUrl, 'base64') let imgBase64 = `data:image/png;base64,${base64Str}`
wx.request({
url: 'http://tmp/wx0009f93430dceb3f.o6zAJsxyeFeUYvzbJ8nfjdv2mRzc.4LgpJVDaSB9kda92809aa6220fb9bf3.png',
method: 'GET',
responseType: 'arraybuffer',
success: function (res) {
console.log(res);
let base64 = wx.arrayBufferToBase64(res.data);
console.log(base64);
});
在真机上能运行？
电脑上也不行了现在，request请求不到了
有什麽解决方法麽？
我电脑上还可以，真机一直不行，除了canvas好像目前没有别的解决办法..
试过canvas在另外一个页面调麽？即是说我写个页面专门画图，然后返回数据，但是draw回调是异步的，不在同一页面请求不到了
写的都是啥，都是错的，正确写法已验证
imgPath 就是通过
wx.chooseImage生成的本地图片的地址（也可以用网络图片的URL，都可以）
url: imgPath,
真机测试的时候，图片地址是wxfile://开头的，wx.Request 直接报错了。
44楼那个方法可以，只不过在转码时候会有bug，iphone真机转码会翻转图片
基本方法如8楼所述，但是绘制并不是立即完成的，canvasGetImageData需要在ctx.draw完成之后才能获取到正确数据；另外在进行base64编码前需要对图片原始数据转化成png，可以参考这里。
还没解决吗？
解决了没？求方法啊
希望 能有好的方法 请给出建议
插播一条 这个 论坛的 BUG
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
wx.createCanvasContext配合开源库UPNG对原始图像数据进行png编码。
这位大兄弟写得很详细https://github.com/zh8637688/wx-cardscanner。他使用的是腾讯AI接口，但是都是将图片数据转为base64后上传。
具体代码如下，记得引入UPNG.js和pako.min.js文件。
//画布setCanvac:function(){varcanvasID ="mycanvas";varcanvas = wx.createCanvasContext(canvasID)// 1. 绘制图片至canvasvarimgPath =this.data.imageInfo.path;varimgWidth =this.data.imageInfo.width;varimgHeight =this.data.imageInfo.height;vararry =this.data.imageInfo.path.split(".");varprefix = arry[arry.length-1];prefix ="data:image/"+ prefix+";base64,";varthat=this;canvas.drawImage(imgPath, 0, 0, imgWidth, imgHeight)// 绘制完成后执行回调，API 1.7.0canvas.draw(false, () => {// 2. 获取图像数据， API 1.9.0wx.canvasGetImageData({canvasId: canvasID,x: 0,y: 0,width: imgWidth,height: imgHeight,success(res) {// 3. png编码if(platform =='ios') {// 兼容处理：ios获取的图片上下颠倒res = that.reverseImgData(res)}varpngData = upng.encode([res.data.buffer], res.width, res.height);// 4. base64编码varbase64 = wx.arrayBufferToBase64(pngData);//base64 = prefix + base64;//console.log(base64);//上传文件的方法，自己写一个就好that.upLoadImage(base64);}})})},//ios图片处理reverseImgData(res) {varw = res.widthvarh = res.heightlet con = 0for(vari = 0; i < h / 2; i++) {for(varj = 0; j < w * 4; j++) {con = res.data[i * w * 4 + j]res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]res.data[(h - i - 1) * w * 4 + j] = con}}returnres},正确的姿势应就像这样：不要把获取像素信息放在chooseImage里
而是要等canvas生成完图片之后，
再去获取像素信息。
但是，把合成的base64图片放到image标签里，在编辑器里显示，在真机上不显示，求解。我用的是安卓手机。
你可以看下这位同学写的：https://blog.csdn.net/qq_36875339/article/details/81086205
时间长了，这些快忘了，你往上找下，就可以找到这位同学了，你们可以交流下，
const fs = wx.getFileSystemManager() // 读取文件， base64 格式 let base64Str = fs.readFileSync(this.data.avatarUrl, 'base64') let imgBase64 = `data:image/png;base64,${base64Str}`wx.request({
url: 'http://tmp/wx0009f93430dceb3f.o6zAJsxyeFeUYvzbJ8nfjdv2mRzc.4LgpJVDaSB9kda92809aa6220fb9bf3.png',
method: 'GET',
responseType: 'arraybuffer',
success: function (res) {
console.log(res);
let base64 = wx.arrayBufferToBase64(res.data);
console.log(base64);
}
});
在真机上能运行？
电脑上也不行了现在，request请求不到了
有什麽解决方法麽？
我电脑上还可以，真机一直不行，除了canvas好像目前没有别的解决办法..
试过canvas在另外一个页面调麽？即是说我写个页面专门画图，然后返回数据，但是draw回调是异步的，不在同一页面请求不到了
写的都是啥，都是错的，正确写法已验证
imgPath 就是通过
wx.chooseImage生成的本地图片的地址（也可以用网络图片的URL，都可以）
wx.request({
url: imgPath,
method: 'GET',
responseType: 'arraybuffer',
success: function (res) {
let base64 = wx.arrayBufferToBase64(res.data);
}
})
真机测试的时候，图片地址是wxfile://开头的，wx.Request 直接报错了。
44楼那个方法可以，只不过在转码时候会有bug，iphone真机转码会翻转图片
基本方法如8楼所述，但是绘制并不是立即完成的，canvasGetImageData需要在ctx.draw完成之后才能获取到正确数据；另外在进行base64编码前需要对图片原始数据转化成png，可以参考这里。
还没解决吗？
解决了没？求方法啊
希望 能有好的方法 请给出建议
插播一条 这个 论坛的 BUG![]()