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：

<!-- 分享 -->
<template>
    <div class="container share">
        <!-- 换一张按钮 -->
        <div @click="shareChange" class="share_change" v-show="changeShow">换一张</div>
        <!-- 背景列表 -->
        <div class="mark" :class="markShow?'':'mark_position_left'">
            <p>--请选择生成图片--</p>
            <div class="mark_item" v-for="(item,index) in imgUrls" :key="index" @click="getBgImg(item)">
                <img :src="item.imgurl" alt="">
            </div>
        </div>
        <!-- 生成图片的DOM -->
        <div class="share_box" ref="box">
            <div clas