canvas完成二维码和图片合成

上个版本街道一个需求，运用url天生一个二维码，然后和别的一张图片合成一张图拍你，
完成思绪是如许的

1. 运用jr-qrcode将url天生data:base64供img运用
2. 然后运用canvas 将两张图合成一张图片

碰到的题目
天生图片以后发明图片很隐约，解决办法是将canvas画布扩展两倍，其他参数也强调两倍就能够了

jr-qrcode 能够运用npm install &＃8211;save jr-qrcode 装置这个包
作用就是能够转化text到data:base64 供img的src 运用

代码以下

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.getQrBase64(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 (