当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-06 00:16:54 HTML5

移动端-海报分享场景:在移动端制作带有二维码的分享海报easyqrcodejs二维码-将链接转为二维码。链接可能包含分享用户的相关信息,活动id等,包括固定信息,也包含既定信息,所以链接转二维码的场景有很多[如果是固定链接,放一个二维码就行了直接打码图片]easyqrcodejs可以在生成的二维码中添加自己产品的logoimportQRCodefrom'easyqrcodejs';//qrCodeRef?.current-elementconstqrCode=newQRCode(qrCodeRef?.current,{logo:DEFAULT_LOGO,//DEFAULT_LOGOlogoaddress-locallogoWidth:60,logoHeight:60,logoBackgroundTransparent:true,onRenderingEnd:()=>{//二维码渲染成功后...},});//qrCodeLink-链接qrCode.makeCode(二维码链接);??从logo地址取远程链接时,在onRenderingEnd(qrCodeOptions,base64DataFn)中如果base64DataFn为null,则生成canvas;logo取本地地址时生成img,样式可以自己设置。html2canvasposter-海报图片+二维码图片+...生成html2canvas将html转换为base64图片的海报图片importhtml2canvasfrom'html2canvas';html2canvas(box,{useCORS:true,//跨域日志记录:true,//loglog}).then(canvas=>{letimgUrl=canvas.toDataURL('image/jpeg',1);//shareImgsetShareImg(imgUrl);});

//position:fixed;顶部:-10000;<分区ef={shareRef}>//海报背景图{//当生成二维码并加载背景图后,再次执行海报//海报加载&2D即可代码加载完成后执行}}onError={()=>{//加载失败,可以报错}}src={backgroundImg}alt="背景图片"/>//海报二维码
//要分享的海报base64
??由于海报背景图经常是动态的,可以在获取海报背景图的时候使用img预加载,防止背景图加载时间过长或者海报背景图加载到白屏。letloadImg=newImage();//图片海报背景图片loadImg.src=picture;??如果IOS13手机版微信浏览器加载图片失败,可以设置html2canvas版本为"html2canvas":"1.0.0-rc.4",因为5及以上版本已经添加了doucumentClone.fonts监控,ios13不支持