html2canvas不能识别svg中的图形,页面截取的图片,没有svg内容
1条回答 默认 最新
- shxs875 2023-06-26 14:21关注
html2canvas 在默认设置下无法识别 SVG 中的内容。要想处理 SVG 中的图形,需要通过设置 html2canvas 的
foreignObjectRendering
选项为true
来开启外部对象渲染,同时还需要在svg
标签中添加xmlns
属性以避免导出的图片文件无法识别 SVG 标记的问题。以下是示例代码:
// 以异步方式获取生成图片所需的工具库 import html2canvas from 'html2canvas'; import { saveAs } from 'file-saver'; // 定义需要渲染为图片的元素,这里使用了一个包含 SVG 图形的 div 元素 const container = document.querySelector('#content'); // 开始渲染过程 html2canvas(container, { foreignObjectRendering: true }).then(canvas => { // 执行回调函数,导出图片 canvas.toBlob(function(blob) { saveAs(blob, 'example.png'); }, 'image/png'); });
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 如何实验stm32主通道和互补通道独立输出
- ¥30 这是哪个作者做的宝宝起名网站
- ¥60 版本过低apk如何修改可以兼容新的安卓系统
- ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
- ¥50 有数据,怎么建立模型求影响全要素生产率的因素
- ¥50 有数据,怎么用matlab求全要素生产率
- ¥15 TI的insta-spin例程
- ¥15 完成下列问题完成下列问题
- ¥15 C#算法问题, 不知道怎么处理这个数据的转换
- ¥15 YoloV5 第三方库的版本对照问题