前言：藉助html2canvas實現

1.html部分

需要截圖的容器
<div class="js-capture hide"></>

截圖生成的圖片存放的位置，注意：img沒有src的時候不要寫src屬性，不然會重新重新整理頁面
<img alt="" class="js-Base64Img hide">

js部分
function generatePicture(cb) {
 圖片是一禎一禎載入的，為了確保圖片載入完再截圖，放在延時載入器裡
 setTimeout(() => {
    getBase64($('.js-capture')[0], function(data) {
      $('.js-Base64Img').attr('src', data);
      if (cb) {
        cb();
      }
    });
  }, 1000);
}

ready是所以資源載入完畢之後才執行
$(() => {
 截圖之前把截圖區域顯示，隱藏狀態下不可截圖
 $('.js-capture').removeClass('hide');
  generatePicture(() => {
  截圖之後把截圖區域給隱藏掉
  $('.js-capture').addClass('hide');
    $('.js-Base64Img').removeClass('hide');
  });
})
 

3.截圖相關

注意點：背景圖片某些手機無法截圖，截圖區域中的圖片不能跨越，不同機型識別二維碼的能力不同，要想全部識別，設計設計頁面應當簡單

import html2canvas from 'html2canvas';

function DPR() {
  if (window.devicePixelRatio && window.devicePixelRatio > 1) {
    return window.devicePixelRatio;
  }
  return 1;
}

function parseValue(value) {
  return parseInt(value, 10);
}

export default function getBase64(el, callback) {
  const dom = el;
  const box = window.getComputedStyle(dom);
  const width = parseValue(box.width);
  const height = parseValue(box.height);
  const scaleBy = DPR();
  const canvas = document.createElement('canvas');
  canvas.width = width * scaleBy;
  canvas.height = height * scaleBy;
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;
  const context = canvas.getContext('2d');
  context.scale(scaleBy, scaleBy);
  html2canvas(dom, {
    canvas,
  }).then(c => {
    把canvas轉位base64
    callback(c.toDataURL('image/png') || '');
  });