canvas合并图片并长按保存

在开发过程中，boss提了个新功能——分享，本来是挺简单的，但是呢，要分享二维码，那就分享呗，但又不能只分享二维码，还得加背景，因为海报中的二维码不是一致的，有个参数是用户id，所以就想着用canvas先绘制二维码，再用canvas将海报跟二维码合并成一张图，最终将合并后的图片分享给好友

<div class="pho-bg">
    <img src="../../assets/images/guessIndex/promote/qrcode_bg.png" alt="" id="main2">
    <img src="" alt="" id="main1">
</div>
<div class="savaImg" v-show="drawShow"></div>
<div class="share-photos" v-show="drawShow">
    <div class="posters-photos">
        <canvas id="myCanvas" width="300" height="500" ref="index" v-show="false"></canvas>
        <div class="photo" id="captureId">
        </div>
    </div>
</div>
<div id="qrcode" ref="qrcode" style="margin-bottom: 1.2rem;" v-show="false"></div>

import QRCode from 'qrcodejs2'//绘制二维码需要引入插件
document.getElementById('qrcode').innerHTML = ''
let url=this.qrCode//二维码路径
let qrcode = new QRCode('qrcode', {
    width: 200,
    height: 200,
    text:'',
    colorDark: "#000",
    colorLight: "#fff",
    correctLevel : QRCode.CorrectLevel.H 
})
qrcode.clear()
qrcode.makeCode(url) 

最后将背景跟二维码合并

let main1 = document.getElementById('main1')
let main2 = document.getElementById('main2')
this.drawShow=true
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 
canvas.width = 690
canvas.height = 970
ctx.rect(0, 0, 690, 970);
ctx.drawImage(main2, 0, 0, 690, 950)
ctx.drawImage(main1, 170, 390, 350, 350)
var newImg = new Image();
var dataUrl = canvas.toDataURL();
newImg = document.createElement("img");
newImg.src = dataUrl;
$('.photo').append(newImg);

以下就是最终效果了，我是前端小菜鸡，有问题望朋友们多多指教^_^