前端生成附帶有背景圖、可添加文字的二維碼
npm install jr-qrcod --save
const qrcode = require(\'jr-qrcode\');
<img id=\'mix_img\'/>
//如果需要二維碼和圖檔一起生成，可以選擇如下方式
const getImageData = (text,img,name,tel) => { //text生成的二維碼連結 img圖檔連結
const qrcodes = qrcode.getQrBase64(text)//轉換base格式
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")//此對象是内建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法。
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")//轉換圖檔為dataURL
document.getElementById(\'mix_img\').setAttribute(\'src\',imageURL);//放到img标簽裡
localSaveImg = imageURL;
})
}
調用方法，傳入對應的參數：
```javascript
getImageData(tgUrl,shareBg,"hello","world");
