把base64格式图片画到canvas画布上（干货建议收藏）_base64画canvas

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
应用场景：

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

<!DOCTYPE html>
		<meta charset="utf-8">
		<title></title>
	</head>
		<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>
<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">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <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>
export const writeFile=(base64Str=> {
  return new Promise((resolve,reject)=>{
    let base64Image =  base64Str.split('...
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ca.
   在微信小程序中canvas drawImage()传入的第一个参数是 imageResource 图片资源路径，这个参数通常由从相册选择图片 wx.chooseImage或 wx.getImageInfo获取图片信息来获得。
  base64 格式图片数据，无法被 getImageInfo 直接调用
解决思路：
首先使用 wx.base64To...
因此可以考虑通过image组件来表示Base64字符串表示的图片，然后用canvas组件绘制image元素来间接实现绘制Base64字符串表示的图片格式。
代码如下：
    var imgbase64 = yourBase64String; //your own param
    let img = new Image();
    img.src = imgbase64;
    let myCanvas = document.getElementById( "myCanvas" ).getContext( '
                                    在微信小程序中 canvas drawImage API 传入的第一个参数是 imageResource 图片资源路径，这个参数通常由从相册选择图片 wx.chooseImage 或 wx.getImageInfo 获取图片信息来获得。
而 base64 格式图片数据，无法被 getImageInfo 直接调用，以下是解决方案：
首先使用 wx.base64ToArrayBuffer 将 base...
                                    /通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染。const canvas = document.createElement("canvas"), //创建canvas元素。width=Img.width, //确保canvas的尺寸和图片一样。
<canvas width="400" height="400" style="margin:50px auto;border: 1px solid #ccc;">
		你的浏览器不支持Canvas
	</canvas>
	<span style="cursor:pointer;">点击下载</span>
	&lt...