在线图片转换为Base64数据

2023-11-02 15:36:18

前言

在微信小程序开发中，开发者经常需要处理图像。然而，由于某些限制，开发者无法直接使用 wx.getImageInfo() 来获取 base64 格式的图片数据。这可能会导致某些功能的实现受到限制，例如将图片上传到服务器、在画布上绘制图片等。

为什么 wx.getImageInfo() 无法获取 base64 数据？

wx.getImageInfo() 方法只能获取本地路径、网络路径或代码包路径的图片信息，而无法获取 base64 格式的图片数据。这是因为 base64 数据不是一个标准的文件格式，它是一种用于表示二进制数据的编码方式。因此，wx.getImageInfo() 方法无法识别 base64 数据，也无法从中提取所需的信息。

如何将在线图片转换为 Base64 数据？

虽然 wx.getImageInfo() 无法直接获取 base64 数据，但我们可以通过其他方式来实现转换。一种常用的方法是使用 HTMLCanvasElement 和 toDataURL() 方法。

首先，我们需要创建一个 HTMLCanvasElement 对象。我们可以通过以下代码来创建：

const canvas = document.createElement('canvas');

接下来，我们需要将在线图片加载到 canvas 中。我们可以使用以下代码来实现：

const image = new Image();
image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);
};
image.src = 'https://example.com/image.png';

加载完成后，我们可以使用 toDataURL() 方法将 canvas 中的图片转换为 base64 数据。我们可以使用以下代码来实现：

const base64Data = canvas.toDataURL('image/png');

最后，我们将 base64 数据保存到一个变量中，以便在小程序中使用。

const base64Data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQA2LzEwLzIwMjIgMTQ6NTc6MjBaAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABHklEQVQ4y52TzWscURTGf5dmzAYYkIiwgIWEhISHChgIYkEELFDY9QiE1bBVFkj0sEr1QRVEWFgULCLQkQERRUENJRSFiBixITRMsbJizduzd3tmZ2ePdznJ2bm7PzOTczezezrkHY4jEbEuAAAAPnPNvQ6maBhGO/XhARgYGmKYFa5AEAaG808AAAAaEwAAAoAAAAeAAAAACgAAAAAAKAAAAFgAAAGQAAAAsAAAAFgAAAFwAAAAwAAAAYAAAAFQAAABsAAAAeAAAAI8FAAAAcAAAAHwAAAHQAAAB0AAAAcAAAAIAAAAGQAAAP4BAAAGAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAAEaAAABGAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAmAAAANgAAAJ4AAABLAAAAPgAAAMoAAABSAAAAowAAAPwAAACgAAAAvAAAAEQAAAPoAAABpAAAAFgAAAOQAAABkAAAAigAAANkAAABsAAAAigAAAPwAAAJ4AAABcAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAADSAAAAHAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAmAAAANgAAAJ4AAABLAAAAPgAAAMoAAABSAAAAowAAAPwAAACgAAAAvAAAAEQAAAPoAAABpAAAAFgAAAOQAAABkAAAAigAAANkAAABsAAAAigAAAPwAAAJ4AAABcAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAADSAAAAHAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAmAAAANgAAAJ4AAABLAAAAPgAAAMoAAABSAAAAowAAAPwAAACgAAAAvAAAAEQAAAPoAAABpAAAAFgAAAOQAAABkAAAAigAAANkAAABsAAAAigAAAPwAAAJ4AAABcAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAADSAAAAHAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAmAAAANgAAAJ4AAABLAAAAPgAAAMoAAABSAAAAowAAAPwAAACgAAAAvAAAAEQAAAPoAAABpAAAAFgAAAOQAAABkAAAAigAAANkAAABsAAAAigAAAPwAAAJ4AAABcAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAADSAAAAHAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAmAAAANgAAAJ4AAABLAAAAPgAAAMoAAABSAAAAowAAAPwAAACgAAAAvAAAAEQAAAPoAAABpAAAAFgAAAOQAAABkAAAAigAAANkAAABsAAAAigAAAPwAAAJ4AAABcAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAADSAAAAHAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAmAAAANgAAAJ4AAABLAAAAPgAAAMoAAABSAAAAowAAAPwAAACgAAAAvAAAAEQAAAPoAAABpAAAAFgAAAOQAAABkAAAAigAAANkAAABsAAAAigAAAPwAAAJ4AAABcAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAADSAAAAHAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAmAAAANgAAAJ4AAABLAAAAPgAAAMoAAABSAAAAowAAAPwAAACgAAAAvAAAAEQAAAPoAAABpAAAAFgAAAOQAAABkAAAAigAAANkAAABsAAAAigAAAPwAAAJ4AAABcAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAADSAAAAHAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAmAAAANgAAAJ4AAABLAAAAPgAAAMoAAABSAAAAowAAAPwAAACgAAAAvAAAAEQAAAPoAAABpAAAAFgAAAOQAAABkAAAAigAAANkAAABsAAAAigAAAPwAAAJ4AAABcAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAADSAAAAHAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAmAAAANgAAAJ4AAABLAAAAPgAAAMoAAABSAAAAowAAAPwAAACgAAAAvAAAAEQAAAPoAAABpAAAAFgAAAOQAAABkAAAAigAAANkAAABsAAAAigAAAPwAAAJ4AAABcAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAADSAAAAHAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAmAAAANgAAAJ4AAABLAAAAPgAAAMoAAABSAAAAowAAAPwAAACgAAAAvAAAAEQAAAPoAAABpAAAAFgAAAOQAAABkAAAAigAAANkAAABsAAAAigAAAPwAAAJ4AAABcAAAAEgAAAR4AAAD+BAAAfgAAAQ4AAADSAAAAHAAAAPwBAAAI+AAABHAAAATQAAAFoAAABuAAAAigAAAF4AAADIAAAAm