移动端生成分享海报图片-easyqrcode+html2canvas

Posted 2021-10-06 桃小妖

移动端-分享海报

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

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}
      
    />
    // 海报二维码
    <div className="qr-code" ref={qrCodeRef} />
  </div>
  // 要分享的海报base64
  <div><img src={shareImg}  ></div>
</div>

⚠️由于海报背景图往往是动态的，可以在获取到海报背景图时使用img预加载，防止背景图load时间过长或海报背景图加载为白屏

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

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