关于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不反对