vue---canvas实现二维码和图片合成的海报

应项目需求，要一张宣传页面上加一个太阳码合成一张宣传海报，用户用微信能够识别进入微信小程序。

 

1. npm安装

npm install html2canvas --save   //html转canvas

2.页面引入

import html2canvas from 'html2canvas';

3.html:

两张图片的具体定位，可经过css控制，这边代码忽略。

qrcode.png为太阳码图片，是后端直接base64返回给前端，前端直接展现（src = 'data:image/png;base64,'+ res.data）,此代码忽略

 

<template>
        <div>
            <div ref="box">
	        <img :src='require("./images/bg.png")' alt="">
	         <img :src='require("./images/qrcode.png")' alt="">
            </div>

　　　　　　　　<!--生成的合成图片-->

<img :src="imgUrl" alt="">
       </div>
</template>

 4.js

<script> import html2canvas from 'html2canvas'; export default { data() { return{ imgUrl:'' } }, methods:{ draw(){ var that = this; html2canvas(that.$refs.box).then(function(canvas) { 　　that.imgUrl = canvas.toDataURL()//将canvas转为base64图片(eg. data:image/png;base64,ijskjlkj) 　　}); }  }, mounted(){ this.draw() } }; </script>