解决html2canvas 截图中SVG有image不渲染问题

guxuehua

已于 2022-06-20 15:00:40 修改

阅读量778

点赞数

分类专栏：遇到的问题文章标签： react.js 前端 reactjs html2canvas qrcode.react

于 2022-06-20 14:54:33 首次发布

本文链接：https://blog.csdn.net/guxuehua/article/details/125372857

版权

遇到的问题专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在使用html2canvas生成分享海报图片时遇到问题，SVG中的二维码logo无法渲染。博客作者发现这是因为html2canvas不会加载SVG中的远程图片。为了解决这个问题，作者建议将logo图片转换为base64编码并直接嵌入SVG，从而确保logo在截图时能够正确显示。

摘要由CSDN通过智能技术生成

最近是在使用html2canvas做分享海报的图片，用qrcode.react的QRCodeSVG生成了二维码，但是发现生成的海报二维码中间的logo不渲染

例如

<QRCodeSVG
   value={pageUrl}
   size={qrSize}
   level={'M'}
   imageSettings={{
       src: 'https://123/web-require-js/themes/18blue/images/logo2.jpg'
       x: null,
       y: null,
       height: logoSize,
       width: logoSize,
       excavate: true,
   }}
/>

是由于html2canvas截图时不会去请求SVG中的image的远程图片，将其改为base64可解决

<QRCodeSVG
   value={pageUrl}
   size={qrSize}
   level={'M'}
   imageSettings={{
       src: 'base64地址'
       x: null,
       y: null,
       height: logoSize,
       width: logoSize,
       excavate: true,
   }}
/>