关于html5:分享海报easyqrcodehtml2canvas

挪动端 - 分享海报

场景：挪动端做含有二维码的分享海报

easyqrcodejs

二维码 - 将 链接 转化成二维码，链接可能会蕴含分享用户的相干信息，流动 id 等等，记蕴含固定信息，也蕴含既定信息，所以将链接转化成二维码的场景十分多【如果是固定链接，那就间接放个二维码图片就可】
easyqrcodejs 能够在生成的二维码上加上自家产品的 logo

import QRCode from 'easyqrcodejs';

// qrCodeRef?.current - element
const qrCode = new QRCode(qrCodeRef?.current, {
    logo: DEFAULT_LOGO, // DEFAULT_LOGO logo 地址 - 本地
    logoWidth: 60,
    logoHeight: 60,
    logoBackgroundTransparent: true,
    onRenderingEnd: () => {// 二维码渲染胜利后...},
});
// qrCodeLink - 链接
qrCode.makeCode(qrCodeLink); 

⚠️ 在 logo 地址取近程链接时，onRenderingEnd(qrCodeOptions, base64DataFn)中的 base64DataFn 为 null，生成的是 canvas；
在 logo 取本地地址时，生成的是 img，能够自行 设置款式。

html2canvas

海报 - 将海报图片 + 二维码图片 +… 生成一张海报图片
即html2canvas将 html 转化成 base64 图片

import html2canvas from 'html2canvas';

html2canvas(box, {
  useCORS: true, // 跨域
  logging: true, // log 日志
}).then(canvas => {let imgUrl = canvas.toDataURL('image/jpeg', 1);
  // shareImg
  setShareImg(imgUrl);
});

<div>
  // position: fixed; top: -10000;
  <div ref={shareRef}>
    // 海报背景图
    <img
      id="canvasCardBcImg"
      onLoad={() => {
        // 当二维码生成且背景图加载之后且再执行画海报
        // 能够海报 load& 二维码 load 之后执行
      }}
      onError={() => {// 加载失败，能够上报谬误}}
      src={backgroundImg}
      alt="背景图"
    />
    // 海报二维码
    <div className="qr-code" ref={qrCodeRef} />
  </div>
  // 要分享的海报 base64
  <div><img src={shareImg} alt="分享海报" ></div>
</div>

⚠️因为海报背景图往往是动静的，能够在获取到海报背景图时应用 img 预加载，避免背景图 load 工夫过长或海报背景图加载为白屏

let loadImg = new Image();
// picture 海报背景图
loadImg.src = picture; 

⚠️IOS13 手机版本的微信浏览器中如果图片加载失败，能够将 html2canvas 版本设置为 "html2canvas": "1.0.0-rc.4",，因为 5 及以上版本减少了doucumentClone.fonts 的监听，ios13 不反对