vue 合成图片

Posted 2021-02-04 zyulike

 

 

目的：将二维码图片和背景图片合成变成一张图片

 

方法一：

引入依赖

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 data = [‘http://cdnzzz.vcgeek.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190118153442.jpg‘, ‘‘];
                var base64 = [];

                var c = document.createElement(‘canvas‘),
                    ctx = c.getContext(‘2d‘),
                    len = data.length;
                
                
                c.width = 400;
                c.height = 800;
                ctx.rect(0, 0, c.width, c.height);
                ctx.fillStyle = ‘#fff‘;
                ctx.fill();

                drawing(0);
                
                function drawing(n) {
                    if(n < len) {
                        console.log(data)
                        var img = new Image;
                        //img.crossOrigin = ‘Anonymous‘; //解决跨域

                        img.src = data[n];
                        img.setAttribute("crossOrigin",‘Anonymous‘);
                        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 {
                        
                        console.log(c)
                        //保存生成作品图片
                        base64.push(c.toDataURL()); //通过canvas.toDataURL转成base64.
                        //alert(JSON.stringify(base64));

                        document.getElementById(‘imgBox‘).innerHTML = ‘<img src="‘ + base64[0] + ‘">‘;
                        document.getElementById(‘downloadPic‘).href = base64[0];
                    }
                }
                

 

 

 

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>