将base64格式的图片画到canvas上（js和vue两种）

在JavaScript中，你可以使用以下步骤将base64格式的图片画到canvas上：

1. 创建一个canvas元素并获取其上下文。
2. 使用atob函数将base64字符串转换为二进制字符串。
3. 将二进制字符串转换为Uint8Array。
4. 使用canvas的putImageData方法画图。

以下是具体的实现代码：

// 假设base64Str是你的base64格式的字符串，包括数据头"data:image/png;base64,"
function drawBase64ImageOnCanvas(base64Str) {
  // 创建canvas元素
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  
  // 将base64字符串转换为二进制字符串
  var binaryStr = atob(base64Str.split(',')[1]);
  var len = binaryStr.length;
  var arr = new Uint8Array(len);
  
  // 将二进制字符串转换为Uint8Array
  for (var i = 0; i < len; i++) {
    arr[i] = binaryStr.charCodeAt(i);
  }
  
  // 创建Blob对象
  var Blob = new Blob([arr], { type: 'image/png' });
  var image = new Image();
  
  // 创建Image对象并画到canvas上
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
  };
  image.src = URL.createObjectURL(Blob);
  
  return canvas;
}

在Vue中，你可以在组件的方法中使用上述函数，并在生命周期钩子中调用它，例如在mounted钩子中：

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>
 
<script>
export default {
  mounted() {
    // 假设base64Str是你的base64图片数据
    let base64Str = 'data:image/png;base64,...';
    let canvas = this.$refs.canvas;
    let ctx = canvas.getContext('2d');
 
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(drawBase64ImageOnCanvas(base64Str), 0, 0);
  }
}
</script>

在这个Vue示例中，我们使用了ref属性来获取canvas元素，并在mounted生命周期钩子中将base64图片画到了这个canvas上。