前端生成附带有背景图、可添加文字的二维码
npm install jr-qrcod --save
const qrcode = require('jr-qrcode');
<img id='mix_img'/>
const getImageData = (text,img,name,tel) => {
const qrcodes = qrcode.getQrBase64(text)
let canvas = document.createElement('canvas')
const width = document.documentElement.clientWidth
const height = document.documentElement.clientHeight
canvas.width = width
canvas.height = height
let ctx = canvas.getContext("2d")
loadImg([qrcodes,img]).then(([img1, img2]) => {
ctx.drawImage(img2, 0, 0, width, height)
ctx.drawImage(img1, ((width + width) / 7.8), (height - (width) / 0.89), width / 2, width / 2)
ctx.font="24px 黑体"
ctx.fillStyle = '#2E2E2E';
ctx.fillText(`${name}邀请您加入洪涛科技`, ((width + width) / 7.5), (height - (width) / 1.9), width / 2, width / 2)
ctx.font="16px 黑体"
ctx.fillStyle = 'white';
ctx.fillText(`${name} ${tel}`, ((width + width) / 4.5), (height - (width) / 0.78), width / 2, width / 2)
ctx.save()
let imageURL = canvas.toDataURL("image/png")
document.getElementById('mix_img').setAttribute('src',imageURL);
localSaveImg = imageURL;
})
}
调用方法,传入对应的参数:
```javascript
getImageData(tgUrl,shareBg,"hello","world");
- 结果:整个背景、二维码、文字都会呈现在一张图片上