应用场景：
使用时将里面的base数据替换即可，画布大小进行修改
如果在vue使用时必须在mounted里面、或者点击触发，因为在这个生命周期后才能获取dom元素
JavaScript：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
<script>
var imgbase64 =
"data:image/jpeg;base64,/******";
//*****为base64
let img = new Image();
img.src = imgbase64;
let myCanvas = document.getElementById("myCanvas").getContext('2d');
img.onload = () => {
myCanvas.drawImage(img, 0, 0);
};
</script>
</body>
</html>
Vue：
<template>
<div><canvas id="myCanvas" width="800" height="800"></canvas></div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
};
},
mounted() {
var imgbase64 =
'data:image/jpeg;base64,/******';
//*****为base64
let img = new Image();
img.src = imgbase64;
let myCanvas = document.getElementById('myCanvas').getContext('2d');
img.onload = () => {
myCanvas.drawImage(img, 0, 0);
};
},
methods: {
}
};
</script>
<style></style>
画布内容转换为base64编码格式的图片
假设一个应用场景：由于某些特殊原因从服务端请求到图片路径，要求通过该路径获取对应图片的 base64 dataURL。在这个场景中，我们首先推断该图片路径是可访问的，同时还需要一种将图片转换到 dataURL 的方法。我们如何实现它呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="img" />
<script src="line.js"></script>
<script>
var img = document.getElementById( 'img' );
var cas = document.createElement( 'canvas' );
var ctx = cas.getContext( '2d' );
cas.width = 100, cas.height = 100;
ctx.fillStyle = 'pink';
ctx.fillRect( 0, 0, 100, 100 );
// 把画布的内容转换为base64编码格式的图片
var data = cas.toDataURL( 'image/png', 1 ); //1表示质量(无损压缩)
img.src = data;
// 把画布的内容转换为base64编码格式的图片
console.log(cvs.toDataURL( 'image/png' ));
/*·
* base64编码图片的应用：
* 如果一个网站中有少量的小图片，可以考虑直接使用base64编码。
* */
</script>
</body>
</html>