vue 合成圖片

 

 

目的：將二維碼圖片和背景圖片合成變成一張圖片

 

方法一：

引入依賴

cnpm install qrcanvas --save
cnpm install html2canvas --save

具體代碼：

<!-- 分享圖片生成 -->
<template>
    <div class="container">
        <div class="share-img">
            <img :src="imgUrl" alt="分享圖">
        </div>
        <div class="creat-img" ref="box">
            <img src="../assets/images/activity/txvip.jpeg" alt="分享背景圖">
            <div id="qrcode" class="qrcode"></div>
        </div>
    </div>
</template>
 
<script>
import { qrcanvas } from 'qrcanvas';
import html2canvas from 'html2canvas';
export default {
    data () {
        return {
            imgUrl:'',
        }
    },
    watch:{
        imgUrl(val,oldval){
            //監聽到imgUrl有變化以后 說明新圖片已經生成 隱藏DOM
            this.$refs.box.style.display = "none";
        }
    },
    created() {
        let that = this;
        that.$nextTick(function () {
           //生成二維碼
           var canvas1 = qrcanvas({
                data: decodeURIComponent(that.$route.query.url),
                size:128
            });
            document.getElementById("qrcode").innerHTML = '';
            document.getElementById('qrcode').appendChild(canvas1);
 
            //合成分享圖
            that.$indicator.open({
                text: '正在生成圖片...',
                spinnerType: 'fading-circle'
            });
            html2canvas(that.$refs.box).then(function(canvas) {
                that.imgUrl =  URL.createObjectURL(that.base64ToBlob(canvas.toDataURL()))                
                setTimeout(()=>{
                    that.$indicator.close(); 
                    that.$toast({
                        message: '圖片已生成，長按保存分享給你的好友吧',
                        position: 'middle',
                        duration: 3000
                    });                   
                },2000)
            });
       })
    },
    
    methods: {
        //base64轉blob
        base64ToBlob(code) {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
 
            let uInt8Array = new Uint8Array(rawLength);
 
            for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
        },
    }
}
 
</script>
<style lang='scss' scoped>
.creat-img{
    img{
        z-index: 3;
    }
    .qrcode{
        position: absolute;
        bottom: .15rem;
        left: 50%;
        margin-left: -64px;
        z-index: 5;
    }
}
 
</style>

 

 

方法二：

html:

<template>
    <div class="container">
        <div id="imgBox" align="center">

        </div>
    </div>
</template>

js:

 

var qr_div = document.getElementById('qr_code').children[0];

                var data = ['http://cdnzzz.vcgeek.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190118153442.jpg', '' + qr_div.src];
                var base64 = [];

                var c = document.createElement('canvas'),
                    ctx = c.getContext('2d'),
                    len = data.length;

                c.width = 750;
                c.height = 1334;
                ctx.rect(0, 0, c.width, c.height);
                ctx.fillStyle = '#fff';
                ctx.fill();

                drawing(0);

                function drawing(n) {
                    if(n < len) {
                        var img = new Image;
                        img.crossOrigin = 'anonymous'; //解決跨域

                        img.src = data[n];
                        img.setAttribute("crossOrigin", 'Anonymous');
                        img.onload = function() {
                            if(n == 1) {
                                ctx.drawImage(img, 55, 1015, 200, 200); //121和129表示二維碼距離背景圖片左上角的X軸，Y軸，160表示生成的圖片中二維碼的大小
                            } else {
                                ctx.drawImage(img, 0, 0, c.width, c.height);
                            }

                            drawing(n + 1); //遞歸
                        }
                    } else {

                        console.log(c)

                        try {

                            //保存生成作品圖片
                            base64.push(c.toDataURL("image/png",1)); //通過canvas.toDataURL轉成base64.


                            document.getElementById('imgBox').innerHTML = '<img style="width:100%" class="invite_qrImg" src="' + base64[0] + '">';

                            //                        alert(base64[0].length)
                        } catch(e) {
                            //TODO handle the exception
                            console.log(alert(e))
                        }

                    }
                }

 

 

 

 

 

 

html合成圖片：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Html5 Canvas 實現圖片合成</title>

        <style>
            body{
                text-align: center;
            }
            img {
                border: solid 1px #ddd;
            }
        </style>
    </head>

    <body>
        <div align="center" style="display: none;">
            <img src="./qr.png">
　　　　　　　<img src="./qr.png">

 </div>
        <input type="button" value="一鍵合成" onclick="hecheng()">
        <a href="" download id="downloadPic">下載合成圖</a>
        <div id="imgBox" align="center">
            
        </div>
        <script>
            function hecheng() {
                draw(function() {
                    document.getElementById('imgBox').innerHTML = '<img src="' + base64[0] + '">';
                    document.getElementById('downloadPic').href = base64[0];
                })
            }

            var data = ['qr.png', ''],
                base64 = [];

            function draw(fn) {
                var c = document.createElement('canvas'),
                    ctx = c.getContext('2d'),
                    len = data.length;
                
                console.log(data.length)
                
                c.width = 400;
                c.height = 800;
                ctx.rect(0, 0, c.width, c.height);
                ctx.fillStyle = '#fff';
                ctx.fill();
                

                
                function drawing(n) {
                    if(n < len) {
                        var img = new Image;
                        //img.crossOrigin = 'Anonymous'; //解決跨域

                        img.src = data[n];
                        img.onload = function() {
                            if(n == 1) {
                                ctx.drawImage(img, 100, 100, 160, 160); //121和129表示二維碼距離背景圖片左上角的X軸，Y軸，160表示生成的圖片中二維碼的大小
                            } else {
                                ctx.drawImage(img, 0, 0, c.width, c.height);
                            }

                            drawing(n + 1); //遞歸
                        }
                    } else {
                        //保存生成作品圖片
                        base64.push(c.toDataURL()); //通過canvas.toDataURL轉成base64.
                        //alert(JSON.stringify(base64));
                        fn();
                    }
                }
                drawing(0);
            }
        </script>
    </body>

</html>