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>