前言：
使用时将里面的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 上。
