微信小程序wx.canvasGetImageData 获取canvas 数据转换wx.arrayBufferToBase64 ，然后在页面渲染出来

微信小程序中的`wx.canvasGetImageData`函数用于从指定区域获取canvas的内容，它返回一个Promise对象，该对象解析后会包含一个ImageData对象，这个对象包含了canvas图像数据。

当你获得了ImageData之后，你可以通过`.data`属性得到像素数据数组，这是一个Uint8ClampedArray类型的数组，代表了图片的每个像素点的颜色值。接着，你需要将这个二进制数据转换成`base64`字符串以便于在网络传输或显示。

以下是一个简单的步骤：

1. 使用`wx.canvasGetImageData`获取canvas的数据：

let canvas = wx.createSelectorQuery().select('#yourCanvasId').fields({
  node: true,
  size: true,
  canvas: true
}).exec();
let imageDataPromise = canvas[0].canvas.toDataURL('image/png');

2. 当Promise解析后，将ImageData转为ArrayBuffer：

imageDataPromise.then((res) => {
  let dataURL = res.data;
  // 使用atob去除data:前缀并分割得到base64编码
  let base64Data = atob(dataURL.substring('data:image/png;base64,'.length));
  
  // 将base64数据转换为ArrayBuffer
  let arrayBuffer = new Uint8Array(base64Data.length);
  for (let i = 0; i < base64Data.length; i++) {
    arrayBuffer[i] = base64Data.charCodeAt(i);
  }

  // 现在你可以将arrayBuffer用于wx.arrayBufferToBase64进一步处理，如果需要显示在页面上，可以赋值给img元素src
  wx.arrayBufferToBase64(arrayBuffer).then((base64Result) => {
    let imgElement = document.getElementById('yourImageId');
    imgElement.src = 'data:image/png;base64,' + base64Result;
  });
});