html2canvas与失效的二维码

3Spiders

字节跳动前端工程师

需求导向

最近做H5活动时，又遇到一个常规的需求，将页面生成一张图片，提示用户长按保存。类似最近看到的微视的一个测试性格的活动。

效果图如下，点击链接可测试，请在微信里打开，测试链接

实现原理

我们利用html2canvas这个前端库，先将html页面转换成canvas，再通过这个API的回调，调用生成base64的方法，最终将图片赋值给img标签的src属性。

代码实现

1.html2canvas转换成base64

这里需要注意，html2canvas入参必须要原生JS的DOM对象

function bodyToImg() {
  // 转换成图片
  html2canvas(document.querySelector('#body')).then(canvas => {
    const dataURL = canvas.toDataURL('image/jpeg');
    $('#bodyImg').attr('src', dataURL);
    $('#bodyImg').show();
    $('#body').hide();

2.获取二维码图片

const url = 'xxx';
let imgUrl = `${window.location.origin}/getQRCode.action?width=129&height=129&url=${url}`;
convertImgToBase64(imgUrl, function (base64) {
  qrCode[0].src = base64;
  qrCode[0].onload = function () {
    validateImages();
function validateImages() {
  let time = setInterval(function () {
    if (qrCode[0].complete) {
      clearInterval(time);
      bodyToImg();
  }, 300);
  setTimeout(function () {
    clearInterval(time);
  }, 30 * 1000);
function convertImgToBase64(url, callback, outputFormat) {
  let canvas = document.createElement('CANVAS');
  let ctx = canvas.getContext('2d');
  let img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function () {
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL(outputFormat || 'image/png');