js/vue两张图片合成一张画布

这个功能很常见，也不难实现

需要一张背景图，一张二维码图

直接上代码

HTML部分：

<canvas id="canvas" width="312.31" height="400"></canvas>

js部分：

这部分可直接写在接口请求到数据下面，大小需自己修改

// 创建 canvas
	const canvas = document.querySelector('#canvas')
	const ctx = canvas.getContext('2d')
// 画图
	var myImg = new Image();
	myImg.src = 'https://xxx.jpg';//图片路径
	var bgImg = new Image();
//canvasd.value是接口返回的图片
	bgImg.src = canvasd.value;
	setTimeout(function(){
	ctx.drawImage(myImg, 0, 0, 312.31, 400)//调整大小
	ctx.drawImage(bgImg, 78,190, 168, 150)//偏移量和大小
	document.querySelector('.generateImg').src = canvas.toDataURL(canvasd.value)
   },10)

drawImage() 方法在画布上绘制图像、画布或视频。（定位，大小）

toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码；

• 将图片转换为base64位编码后，图片会跟随代码（html、css、js）一起请求加载，不会再单独进行请求加载；

• 可以防止由于图片路径错误导致图片加载失败的问题；

基础的功能就是这样，肥肠容易理解。

文章仅限参考 如有错误请及时指出或补充 大家一起努力加油！