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

前言：

使用时将里面的base数据替换即可，画布大小进行修改
vue使用时必须在mounted里面、或者点击触发，因为在这个生命周期后才能获取dom元素

 js：

// 在 JavaScript 中将 base64 格式的图片画到 canvas 上可以按照以下步骤进行操作：

// 创建一个 Image 对象
var img = new Image();

// 指定 base64 格式的图片作为 Image 对象的 src
img.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA...';

// 等待图片加载完成
img.onload = function() {
  // 获取 Canvas 元素
  var canvas = document.getElementById('myCanvas');

  // 获取 2D 绘图上下文
  var ctx = canvas.getContext('2d');

  // 将图片绘制到 Canvas 上
  ctx.drawImage(img, 0, 0);
}

vue：

 总结：

在这两种示例中，都是通过创建一个新的 Image 对象，并将 base64 格式的图片赋值给它的 src 属性。接着使用 onload 事件确保图片加载完成后，获取 Canvas 元素和 2D 绘图上下文，最后调用 drawImage 方法将图片绘制到 Canvas 上。

base64 格式的图片实际上是将图片以文本的形式编码成一长串字符，通过 data URI scheme 的方式嵌入到页面中。因此，当指定这样的字符串作为 Image 对象的 src 时，浏览器会自动解析并将其渲染为图片。然后通过 Canvas 的 2D 绘图上下文的 drawImage 方法，将图片绘制到 Canvas 上。