應項目需求,要一張宣傳頁面上加一個太陽碼合成一張宣傳海報,用戶用微信能夠識別進入微信小程序。css
1. npm安裝html
npm install html2canvas --save //html轉canvas前端
2.頁面引入npm
import html2canvas from 'html2canvas';canvas
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.jsui
<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>