首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

探索如何html和svg导出为图片

,但实际上换成同源的图片,同样也是裂开的,解决方法很简单,遍历svg节点树,图片都转换成data:URL的形式即可: // 操作svg使用了@svgdotjs/svg.js库 const transfromImg...字符串 } 这里使用了前面的drawToCanvas方法来图片转换成data:URL,这样导出就正常了: 到这里,纯 svg 转换为图片就基本没啥问题了。...) SVG方法是用来一段html字符串转换为dom节点的。...: firefox能忍这个不能忍,于是尝试使用一些html转换为图片的库。...,同时了解了一下dom-to-image库的实现原理,发现它也是通过dom节点添加到svg的foreignObject标签中实现将html转换成图片的,那么就很搞笑了,我本身要转换的内容就是一个嵌入了

47121

dom-to-image库是如何html转换成图片

dom-to-image库可以帮你把dom节点转换为图片,它的核心原理很简单,就是利用svg的foreignObject标签能嵌入html的特性,然后通过img标签加载svg,最后再通过canvas绘制...另一个知名的html2canvas库其实也支持这种方式。...节点转换成图片 我们用的最多的api应该就是toPng(node),所以以这个方法为入口: function toPng(node, options) { return draw(node,...svg转换成data:URL 图片也处理完了接下来就可以svg转换成data:URL了: function makeSvgDataUri(node) { let width = options.width...总结 本文通过源码详细介绍了dom-to-image-more的原理,核心就是克隆节点和节点样式,内联字体、背景图片图片,然后通过svg的foreignObject标签嵌入克隆后的节点,最后svg转换成图片

28410
领券