微信小程序canvas绘制圆角base64图片的实现

微信小程序的Canvas绘制圆角Base64图片的实现方法

在微信小程序中，我们经常需要从服务器获取二维码图片，通常这些图片是以Base64格式返回的。小程序Canvas并不直接支持从Base64格式绘制图片。我们可以利用小程序的文件系统来解决这个问题。接下来，我将详细讲解如何使用小程序的文件系统来将Base64格式的图片转换为本地图片，并使用Canvas绘制圆角二维码。

一、获取Base64格式的图片

我们可以使用微信小程序的请求功能，从服务器获取Base64格式的二维码。例如：

```javascript

getXcxQrcode() {

wx.request({

url: app.globalData.globalUrl + "/get_wx_code",

data: {

token: app.globalData.weixin_token,

scene: app.globalData.page_key,

page: "pages/index/index"

},

success: (res) => {

if (res.data && res.data.success) {

this.base64src(res.data);

}

}

})

}

```

二、将Base64格式的图片转换成本地图片

获取到Base64格式的图片后，我们可以使用小程序的文件系统API将其写入本地，转换成图片文件。代码如下：

```javascript

base64src(base64data) {

const filePath = `${wx.env.USER_DATA_PATH}/tmpbase64.png`;

const buffer = wx.base64ToArrayBuffer(base64data); // 将base64转为ArrayBuffer格式

let that = this;

fsm.writeFile({ // 使用文件系统API写入文件

filePath,

data: buffer, // 写入的数据是ArrayBuffer格式的数据

encoding: 'binary', // 指定编码方式，这里使用二进制编码方式写入文件内容（可选）是二进制数据无需指定编码方式默认binary即可）以二进制形式存储文件内容。编码方式会影响到文件的读写操作。对于二进制文件而言，采用二进制编码方式（binary）存储，更有利于数据的读取与。因此建议上传二进制文件时指定编码方式为binary。非二进制数据不推荐指定编码方式（如txt文本等）文件写入成功后会在设备的文件系统内部创建一个新的文件，文件的路径由文件的路径参数指定。如果指定的路径不存在则会创建路径并创建文件。如果指定的路径存在则会直接覆盖原有文件内容。写入操作完成后会通过回调函数返回执行结果。如果发生错误则会触发 fail 函数传入错误对象作为参数。成功则返回空对象作为回调函数的参数。失败则返回一个错误对象包含错误信息可以调用 Error对象的 getMessage 接口获取具体的错误信息码：参数包含以下内容，可根据需要进行选择性的判断使用具体的返回值见下方示例代码中的注释说明。在调用此方法时请确保设备已经拥有读写文件的权限否则会触发错误回调函数的调用。此接口会异步执行完毕后再返回执行结果所以需要在异步操作完成后才能获取到文件的内容。在调用异步接口的时候我们需要注意回调函数的正确使用方法以防止内存泄漏问题。请注意：使用前需要确保有文件系统访问权限并且开启后台访问权限否则将无法正常使用此接口功能。代码示例如下： （注：示例代码中的注释说明为解释说明性质的文字用于帮助理解代码逻辑并无实际功能。）同时请确保调用接口的代码块在正确的生命周期函数中执行否则可能会导致无法获取到正确的执行结果甚至出现其他不可预知的问题。另外还需要注意文件写入操作可能需要一些时间来完成所以请耐心等待不要频繁调用此接口以免影响性能和用户体验。关于具体的错误码信息请参考官方文档中的错误码说明进行调试和排查问题。具体实现代码如下：首先定义了一个文件路径变量 filePath 用于保存将要写入的文件的路径然后使用 wx 对象提供的 base64ToArrayBuffer 方法将 base64 格式的数据转换为 ArrayBuffer 格式的数据接着调用 fsm 对象提供的 writeFile 方法将数据写入文件中并指定文件的路径和编码方式等参数最后通过回调函数处理写入操作的结果包括成功和失败两种情况的处理逻辑在成功的情况下获取到文件的路径并将其赋值给 that 对象的 qrcodeUrl 属性以便后续使用 Canvas 绘制图片时使用在失败的情况下则抛出一个错误对象以提示开发者处理错误情况完成文件的写入操作后我们就可以使用 Canvas 绘制圆角二维码了这里假设已经有一个 Canvas 上下文对象 ctx 下面将会使用它来绘制圆角二维码的示例代码如下所示：（这里省略了 Canvas 的初始化和上下文对象的创建过程）通过调用 ctx 对象的 save 方法保存当前的绘图上下文状态以便在绘制完成后恢复状态接着调用 ctx 对象的 beginPath 方法开始绘制新的图形然后使用 ctx 对象的 arc 方法绘制一个圆形以指定二维码的圆角接着调用 ctx 对象的 clip 方法进行剪切以便后续绘制图片时只绘制在剪切区域内然后使用 ctx 对象的 drawImage 方法绘制图片并指定图片的路径位置以及绘制的大小最后调用 ctx 对象的 draw 方法完成绘制操作这样就可以在 Canvas 上绘制出一个带有圆角的二维码图片了下面是将上述