挪动端-分享海报
场景： 挪动端做含有二维码的分享海报
easyqrcodejs
二维码-将链接转化成二维码，链接可能会蕴含分享用户的相干信息，流动id等等，记蕴含固定信息，也蕴含既定信息，所以将链接转化成二维码的场景十分多【如果是固定链接，那就间接放个二维码图片就可】
easyqrcodejs能够在生成的二维码上加上自家产品的logo
import QRCode from 'easyqrcodejs';// qrCodeRef?.current - elementconst 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不反对