微信小程序开发-（图片base64编码）

它是用于在网络上传输8位字节码的最常见的编码方法之一。它可以用于在HTTP环境中传输长标识信息。因此，在许多与图像相关的app或接口调用中，通常使用base64编码来传输图像数据。

Base64编码在小程序中不是特别完美。为了解决这个问题，本文根据具体的应用场景，总结了三种获得图像Base64编码的方法。

1.帆布图

适用场景：获取canvas绘制的图片的base64编码，并使用早期版本（1.9.9之前）的applet

缺点：画布只能绘制与屏幕大小相同的图片。当图片大小超过屏幕大小时，它无法获得某些超过屏幕大小的图片的base64编码。

canvas=wx.createCanvasContext（canvas_id）

//将图片绘制到画布上，imgPath是图片的路径

帆布drawImage（imgPath，0，0，imgWidth，imgHeight）

帆布绘制（false，（）=>{

wx.canvasGetImageData({

canvasId:canvas_ id，

x： 0，

y： 0，

宽度：imgWidth，

高度：imgHeight，

成功（res）{

//执行png编码

让pngData=upng.encode（[res.data.buffer]，res.width，res.height）

//在png数据调用接口上完成base64编码

让base64=wx.arrayBufferToBase64（pngData）

// ...

}

})

})

2.使用小程序自己的界面：

适用场景：由于微信最近改进了该界面，微信的版本要求更高（1.9.9之后）；当不需要对图像进行缩放或执行其他操作时，可以获得任何大小图像的base64编码。

缺点：给定图片只能计算base64编码。更一般地，我们需要将图片的宽度缩放到小于或等于屏幕的宽度。

//基准64

让base64=wx.getFileSystemManager（）。readFileSync（imgPath，“base64”）

3.通过后台服务器处理

适用场景：在获得base64编码之前，需要对图像进行预处理，如缩放。

缺点：需要部署ECS，编码速度慢。

#以下是Flask框架服务器端处理base64请求的代码，仅供参考

@app。路由（'/get_base64'，方法=['get'，'POST']）

定义trans_base64（）：

data_ dir='./data/image'

file_obj=请求.files[“img”]。读取（）

width=int（圆形（float（request.form.get（'width'））））

height=int（圆形（float（request.form.get（'height'））））

img=图像.open（字节IO（文件_obj））

img=img。调整大小（（宽度，高度），Image.ANTIALIAS）

output_buffer=字符串IO（）

img。保存（output_buffer，format='ping'）

二进制数据=output_buffer.getvalue（）

base64_ data=base64.b64encode（二进制数据）

返回base64_数据

#小程序的base64请求代码

wx.upload文件({

url:'your_host_address:port/get_base64'，

filePath：路径，

表单数据：{

'width'：sys_width，//调整宽度。

'height'：sys_width/img_radio//调整高度。

},

成功：函数（res）{

让base64=res.data

安慰日志（“base64为：”，base64）

}

})

总结

以前，我在计算图像的base64编码时走了很多弯路。我一直想在没有后台交互的情况下解决这个问题。所以我看到了很多在线教程，类似于下面的代码：

urlTobase64（url）{

请求({

url:url，

responseType:“arraybuffer”，

成功：res=>{

设base64＝wx。阵列缓冲区到Base64（res）；

基数64　= '数据：image/jpeg；base64，'+base64

控制台.log（base64）

}

})

}

wx.选择图像({

成功：res=>{

this.urlTobase64（res.tempFilePaths[0]）

}

})

最初似乎没有问题，它可以在PC端的开发和测试期间正常运行，但一旦移动端用于测试，它将无法工作。后来，我想我们得到的图片的临时地址（res.tempFilePaths[0]）都是从http开始的，微信明确规定不支持http类型的请求，所以在移动终端测试中会出现问题。

以上是我在小程序中分享的base64代码转换。如果你有任何问题，你可以私下评论或交流。希望以上内容能够帮助小程序开发者，避免踩到陷阱。如果你觉得这篇文章对你有用，欢迎给予奖励，

最后，欢迎使用我的小程序来阅读图片和解决单词。它完全免费：

识别图形字符