canvas如何实现二维码和图片合成的代码

import React, { Component } from 'react'
const qrcode = require('jr-qrcode')
const loadImg = (src) => {
 const paths = Array.isArray(src) ? src : [src];
 const promise = [];
 paths.forEach((path) => {
 promise.push(new Promise((resolve, reject) => {
 let img = new Image();
 img.crossOrigin = "Anonymous";
 img.src = path;
 img.onload = () => {
 resolve(img);
 };
 img.onerror = (err) => {
 console.log('图片加载失败')
 }
 }))
 });
 return Promise.all(promise);

}
const getImageData = (url, src) => {
 const imgsrc = qrcode.getQrBase(url)
 let canvas = document.createElement('canvas')
 const width = document.documentElement.clientWidth
 const height = document.documentElement.clientHeight
 canvas.width = width*2
 canvas.height = height*2
 let ctx = canvas.getContext("2d")
 loadImg([imgsrc, src]).then(([img1, img2]) => {
 ctx.drawImage(img2, 0, 0, width*2, height*2)
 ctx.drawImage(img1, width-80, height*2-220, 200, 160)
 ctx.fillStyle = 'rgba(0,0,0,0.3)';
 ctx.fillRect(width-80, height*2-60, 200, 40);
 ctx.save()
 ctx.font="28px Arial"
 ctx.fillStyle = '#fff';
 ctx.fillText('长按识别二维码', width-80, height*2-30, 200, 160)
 let imageURL = canvas.toDataURL("image/png")
 document.getElementById('mix_img').setAttribute('src',imageURL)
 })
}
export default class QRcode extends Component {
 render() {
 const { url , picSrc} = this.props
 getImageData(url,picSrc)
 return (
 <p>
 <img alt='mix_img' id='mix_img'/>
 </p>
 )
 }

}