H5页面canvas绘制多张图片和二维码生成

H5页面canvas绘制多张图片和二维码生成

vue的h5页面生成canvas海报图,要求绘制一张背景底图，在背景图上绘制头像，文字和二维码，最后合成一张图片

npm install --save qrcode 下载生成二维码的依赖包

<template><div><div @click="fncreatQode">点击生成海报</div><div class="" ><div class="postsavebtn">长按保存海报</div><div class="postimg"><!-- 展示海报图 --><img :src="canvasimg"  /></div><!-- 生成二维码canvas --><canvas id="postcanvas" class="postcanvas" style="width: 510px;height: 900px;"></canvas></div></div></template><script>import QRCode from 'qrcode'export default {data(){return {qodePicture:'',canvasimg:'',}},mounted(){},methods:{  fncreatQode(){//h5生成二维码let that = this// 这个weburl是扫码后需要跳转的地址var weburl = '=1'QRCode.toDataURL(weburl, {version: 7,errorCorrectionLevel: 'Q',width: 150,//二维码尺寸大小height: 150//二维码尺寸大小}).then((url) => {// url为base64的图片that.qodePicture = url// 开始绘制海报that.fncreatCanvas()}).catch((err) => {console.error(err)})},async fncreatCanvas(){const that = thisvar width = 510*2,radius=10*2,height=900*2var canvas = document.getElementById("postcanvas");var qodectx = canvas.getContext("2d");// canvas的样式尺寸还是原尺寸,这里的canvas尺寸设置为原来的2倍,防止生成的图片不清晰,另外设置宽高可以清空画布canvas.width = widthcanvas.height = height// 绘制带圆角的矩形,海报背景图为带圆角的矩形qodectx.beginPath();qodectx.arc(width-radius, height-radius, radius, 0, Math.PI/2);qodectx.lineTo(radius, height);qodectx.arc(radius, height-radius, radius, Math.PI/2, Math.PI);qodectx.lineTo(0, radius);qodectx.arc(radius, radius, radius, Math.PI, Math.PI*3/2);qodectx.lineTo(width-radius, 0);qodectx.arc(width-radius,radius,radius,Math.PI*3/2, Math.PI*2);qodectx.clip()qodectx.closePath()// 绘制海报图await that.creatImage('../../postimg.png').then((img) => {//由于海报做底图，头像文字都在海报上面，用异步qodectx.drawImage(img, 0, 0,width,height)qodectx.font = "Bold 48px Arial";qodectx.textAlign = "center"qodectx.fillStyle = "#fff";qodectx.fillText('恭喜发财', 180*2, 70*2);});// 绘制二维码await that.creatImage(that.qodePicture).then((img) => {qodectx.drawImage(img, 350*2, 735*2,125*2,125*2)});  // 绘制头像await that.creatImage('../../headimg.png').then((imgs) => {that.drawCircleImage(qodectx, imgs, 30*2, 30*2,50*2);})// 将canvas换成base64图片展示that.canvasimg = canvas.toDataURL();},creatImage(src) {return new Promise((resolve, reject) => {const img = new Image();// 设置图片跨域,不然如果有跨域,手机显示不出来img.setAttribute('crossOrigin', 'anonymous');img.onload = () => {resolve(img);};img.onerror = () => {reject();};img.src = src;if (img.complete) {resolve(img);}});},drawCircleImage(ctx, img, x, y,r){ctx.beginPath();let d = r * 2;let cx = x + rlet cy = y + r;ctx.arc(cx, cy, r, 0, 2 * Math.PI);// 默认边框是黑色,设置为透明的ctx.strokeStyle = 'transparent'; ctx.stroke(); ctx.clip();ctx.closePath()ctx.drawImage(img, x, y, d, d);},}}
</script>

注：这里如果图片有跨域，需要设置一下img.setAttribute('crossOrigin', 'anonymous');，否则手机显示不 出来；

因为绘制的图片是叠加，所以用了异步，否则头像文字会被背景图遮挡住。