将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：

<template>
  <canvas ref="myCanvas"></canvas>
</template>
 
<script>
export default {
  mounted() {
    // 创建一个 Image 对象
    var img = new Image();
 
    // 指定 base64 格式的图片作为 Image 对象的 src
    img.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA...';
 
    // 等待图片加载完成
    img.onload = () => {
      // 获取 Canvas 元素
      var canvas = this.$refs.myCanvas;
 
      // 获取 2D 绘图上下文
      var ctx = canvas.getContext('2d');
 
      // 将图片绘制到 Canvas 上
      ctx.drawImage(img, 0, 0);
    }
  }
}
</script>复制

 总结：

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

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