1.简述

链接生成二维码，再通过HTML5 中 canvas 和背景图片合成，生成海报

  1. //创建一个canvas
  2. var canvas = document.createElement("canvas");
  3. var context = canvas.getContext("2d");  //定义一个2d的环境
  4. // 定义宽高
  5. canvas.width = 750; 
  6. canvas.height = 1334;

2.使用context.drawImage绘制图片

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

剪切图像，并在画布上定位被剪切的部分：

  1. context.drawImage(img,x,y,width,height);

参数值

参数 描述
img 规定要使用的图像、画布或视频。
x 可选。开始剪切的 x 坐标位置。
y 可选。开始剪切的 y 坐标位置。
width 可选。被剪切图像的宽度。
height 可选。被剪切图像的高度。

3.写入背景图片

由于canvas通过Image对象写入，所以要把图片链接转成image

  1. var bgImg = new Image();
  2. bgImg.src = bg;
  3. //要在onload写入，不然写入图片没用
  4.  bgImg.onload = () => {
  5.      // context.drawImage(图片对象, 绘制的X坐标, 绘制的Y坐标, 绘制图片的宽度, 绘制图片的高度);
  6.       context.drawImage(bgImg, 0, 0, 750, 1334);
  7.  }

4.使用QRCode.js把链接生成二维码

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

  1.  var qr = document.createElement("div"); //创建一个div
  2.     new QRCode(qr, {
  3.         text: link,  //生成图片的链接
  4.         height: height, //图片高度
  5.         width: width, //图片宽度
  6.         colorDark: "#000000", 
  7.         colorLight: "#ffffff",
  8.         correctLevel: QRCode.CorrectLevel.H
  9.     });
  10.  context.drawImage(qr.childNodes[0], 420, 680, 210, 200);

5.通过canvas.toDataURL转成base64

  1. // 设置anonymous防止跨域
  2. img2.crossOrigin = "anonymous";
  3.  img2.onload = function () {
  4.      document.querySelector("#qr-code").src = img2.src;
  5.     };

6. 绘制边框

  1. context.lineWidth = 20; //设置绘制的宽度
  2. context.strokeStyle = "#ffffff";  //设置绘制的颜色
  3. context.strokeRect(410, 660, width, height); //开始绘制

7.绘制文字

  1. context.font = " 38px Arial"; //设置字体大小和类型
  2. context.fillStyle = "rgba(255,255,255,1)"; //设置字体颜色
  3. context.fillText(font, 500, 450); //绘制文字