应项目需求,要一张宣传页面上加一个太阳码合成一张宣传海报,用户用微信可以识别进入微信小程序。
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>