Vue.js结合Canvas制作二维码和图片的合成（html2canvas + Canvas2Image）--整理

之前写过一篇关于二维码和图片合成的博文，但是存在一些问题，本篇是本人整理最后在项目中使用的。

建议：如果是单张背景图或者是多张背景图且二维码在同一位置的话，建议直接在后台合成分享图直接给前端返回即可，我这次项目需求是多张背景图并且二维码的位置都不同，后台不方便处理，所以直接前端来处理了。

需求背景：

 分享图片，图片中含有自己分享链接生成的二维码！！

大体思路：

• 第一步、将自己的分享码或其他字段传给后台，后台返回Base64格式的二维码图片；（至于为什么要使用Base64格式，如果返回其他格式的图片会出现二维码加载不出来的情况）
• 第二步、二维码放在背景图的指定位置，再合成分享图片；

npm安装：

1.npm install html2canvas --save  //html转canvas

2.npm install canvas2image --save  //canvas转图片

页面引入：

import html2canvas from 'html2canvas';

import Canvas2Image from 'canvas2image';

html：

js：

css：

.share {
    width: 100%;
    height: calc(100% - .6rem);
    background: #fff;
    .share_change {
        font-size: 14px;
        padding: .04rem .1rem;
        color: #fff;
        background: rgba(0, 0, 0, .4);
        border-radius: 100px;
        position: fixed;
        top: 1.5rem;
        right: .1rem;
    }
    .mark {
        width: 96%;
        height: 100%;
        margin: 0 auto;
        overflow-y: scroll;
        p {
            font-size: 14px;
            text-align: center;
            margin: .1rem 0;
            color: #888888;
        }
        .mark_item {
            width: 40%;
            margin: 0 5%;
            margin-bottom: .2rem;
            box-shadow: 1px 1px 1px 2px #ccc;
            float: left;
        }
    }
    .mark_position_left {
        position: fixed;
        top: 0;
        left: -100%;
    }
    .share_box {
        width: 100%;
        position: fixed;
        top: 0;
        left: -100%;
    }
    .img-box {
        position: relative;
        .shareBg {
            z-index: 3;
        }
        .shareQr {
            position: absolute;
            z-index: 5;
        }
        .shar1 {
            width: .49rem;
            height: .49rem;
            top: 6rem;
            left: .86rem;
        }
        .shar2 {
            width: .49rem;
            height: .49rem;
            top: 5.7rem;
            right: .24rem;
        }
        .shar3 {
            width: .75rem;
            height: .75rem;
            top: 4.88rem;
            right: .21rem;
        }
        .shar4 {
            width: .66rem;
            height: .66rem;
            top: 4.98rem;
            left: .17rem;
        }
        .shar5 {
            width: .6rem;
            height: .6rem;
            top: 5.05rem;
            left: .09rem;
        }
        .shar6 {
            width: .6rem;
            height: .6rem;
            top: 5.1rem;
            left: 1.56rem;
        }
        .shar7 {
            width: .64rem;
            height: .64rem;
            top: 4.69rem;
            left: 1.12rem;
        }
        .shar8 {
            width: .75rem;
            height: .75rem;
            top: 2.73rem;
            left: 1.5rem;
        }
        .shar9 {
            width: .65rem;
            height: .65rem;
            top: 2.72rem;
            left: 1.54rem;
        }
    }
}