附带有背景图、文字的二维码

前端生成附带有背景图、可添加文字的二维码

• 下载

npm install jr-qrcod --save 

• 引入

const qrcode = require('jr-qrcode');

• 使用

<img  id='mix_img'/>

• 方法

//如果需要二维码和图片一起生成，可以选择如下方式
const loadImg = (src) => {
 // 为图片添加加载验证，
   const paths = Array.isArray(src) ? src : [src];
   const imgArray = [];
   paths.forEach((path) => {
       imgArray.push(new Promise((resolve) => {
           let img = new Image();
           // img.crossOrigin = "Anonymous";    //允许页面的域名访问，否则无法加载此处JS
           img.src = path;
           img.onload = () => {
               resolve(img)
           };
       }))
   });
   return Promise.all(imgArray);
}

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");

• 结果:整个背景、二维码、文字都会呈现在一张图片上
  
  在使用的过程中可能出现的问题：
  1：不能在静态页面中测试，会报如下错误

test.html:73 Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

如果去百度，多数会提示在图片处理的过程中没有添加属性crossOrigin(也就是在图片加载处理的方法loadImg 中),但是如上我们是添加了的。那么还有什么问题？
添加了该属性，图片的正常呈现是要在某个固定的域名下，或者是分离项目本地IP下执行，否则无法正常显示。