笔者开源了一个Web思维导图，在做导出为图片的性能时走了挺多弯路，所以通过本文来记录一下。
思维导图的节点和连线都是通过 svg 渲染的，作为一个纯 js 库，咱们不思考通过后端来实现，所以只能思考如何通过纯前端的形式来实现将svg或html转换为图片。
应用img标签联合canvas导出
咱们都晓得 img 标签能够显示 svg，而后 canvas 又能够渲染 img，那么是不是只有将svg渲染到img标签里，再通过canvas导出为图片就能够呢，答案是必定的。
const svgToPng = async (svgStr) => { // 转换成blob数据 let blob = new Blob([svgStr], { type: 'image/svg+xml' }) // 转换成data:url数据 let svgUrl = await blobToUrl(blob) // 绘制到canvas上 let imgData = await drawToCanvas(svgUrl) // 下载 downloadFile(imgData, '图片.png')}svgStr是要导出的svg字符串，比方：
而后通过Blob构造函数创立一个类型为image/svg+xml的blob数据，接下来将blob数据转换成data:URL：
const blobToUrl = (blob) => { return new Promise((resolve, reject) => { let reader = new FileReader() reader.onload = evt => { resolve(evt.target.result) } reader.onerror = err => { reject(err) } reader.readAsDataURL(blob) })}其实就是base64格局的字符串。
接下来就能够通过img来加载，并渲染到canvas里进行导出：
const drawToCanvas = (svgUrl) => { return new Promise((resolve, reject) => { const img = new Image() // 跨域图片须要增加这个属性，否则画布被净化了无奈导出图片 img.setAttribute('crossOrigin', 'anonymous') img.onload = async () => { try { let canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height let ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, img.width, img.height) resolve(canvas.toDataURL()) } catch (error) { reject(error) } } img.onerror = e => { reject(e) } img.src = svgUrl })}canvas.toDataURL()办法返回的也是一个base64格局的data:URL字符串：
最初就能够通过a标签来下载：
const downloadFile = (file, fileName) => { let a = document.createElement('a') a.href = file a.download = fileName a.click()}实现很简略，成果也不错，不过这样就没问题了吗，接下来咱们插入两张图片试试。
解决存在图片的状况
第一张图片是应用base64的data:URL形式插入的，第二张图片是应用一般url插入的：
导出后果如下：
能够看到，第一张图片没有问题，第二张图片裂开了，可能你感觉同源策略的问题，但实际上换成同源的图片，同样也是裂开的，解决办法很简略，遍历svg节点树，将图片都转换成data:URL的模式即可：
// 操作svg应用了@svgdotjs/svg.js库const transfromImg = (svgNode) => { let imageList = svgNode.find('image') let task = imageList.map(async item => { // 获取图片url let imgUlr = item.attr('href') || item.attr('xlink:href') // 曾经是data:URL模式不必转换 if (/^data:/.test(imgUlr)) { return } // 转换并替换图片url let imgData = await drawToCanvas(imgUlr) item.attr('href', imgData) }) await Promise.all(task) return svgNode.svg()// 返回svg html字符串}这里应用了后面的drawToCanvas办法来将图片转换成data:URL，这样导出就失常了：
到这里，将纯 svg 转换为图片就根本没啥问题了。
解决存在foreignObject标签的状况
svg提供了一个foreignObject标签，能够插入html节点，实际上，笔者就是应用它来实现节点的富文本编辑成果的：
接下来应用后面的形式来导出，后果如下：
明明显示没有问题，导出时foreignObject内容却产生了偏移，这是为啥呢，其实是因为默认款式的问题，页面全局革除了margin和padding，以及将box-sizing设置成了border-box：
那么当svg存在于文档树中时是没有问题的，然而导出时应用的是svg字符串，是脱离于文档的，所以没有这个款式笼罩，那么显示天然会呈现问题，晓得了起因，解决办法有两种，一是遍历所有嵌入的html节点，手动增加内联款式，留神肯定要给所有的html节点都增加，只给svg、foreignObject或最外层的html节点增加都是不行的；第二种是间接在foreignObject标签里增加一个style标签，通过style标签来加上款式，并且只有给其中一个foreignObject标签增加就能够了，两种形式看你喜爱哪种，笔者应用的是第二种：
const transformForeignObject = (svgNode) => { let foreignObjectList = svgNode.find('foreignObject') if (foreignObjectList.length > 0) { foreignObjectList[0].add(SVG(`<style> * { margin: 0; padding: 0; box-sizing: border-box; } </style>`)) } return svgNode.svg()}导出后果如下：
能够看到，一切正常。
对于兼容性的问题，笔者测试了最新的chrome、firefox、opera、safari、360急速浏览器，运行都是失常的。
踩坑记录
后面介绍的是笔者目前采纳的计划，看着实现其实非常简单，然而过程漫长且崎岖，接下来，开始我的表演。
foreignObject标签内容在firefox浏览器上无奈显示
对于svg的操作笔者应用的是svg.js库，创立富文本节点的外围代码大抵如下：
import { SVG, ForeignObject } from '@svgdotjs/svg.js'let html = `<div>节点文本</div>`let foreignObject = new ForeignObject()foreignObject.add(SVG(html))g.add(foreignObject)SVG办法是用来将一段html字符串转换为dom节点的。
在chrome浏览器和opera浏览器上渲染十分失常，然而在firefox浏览器上foreignObject标签的内容齐全渲染不进去：
查看元素也看不出有任何问题，并且神奇的是只有在控制台元素里编辑一下嵌入的html内容，它就能够显示了，百度搜寻了一圈，也没找到解决办法，而后因为firefox浏览器占有率并不高，于是这个问题就搁浅了。
应用img联合canvas导出图片里foreignObject标签内容为空
chrome浏览器尽管渲染是失常的：
然而应用后面的形式导出时foreignObject标签内容却是跟在firefox浏览器里显示一样是空的：
firefox能忍这个不能忍，于是尝试应用一些将html转换为图片的库。
应用html2canvas、dom-to-image等库
应用html2canvas：
import html2canvas from 'html2canvas'const useHtml2canvas = async (svgNode) => { let el = document.createElement('div') el.style.position = 'absolute' el.style.left = '-9999999px' el.appendChild(svgNode) document.body.appendChild(el)// html2canvas转换须要被转换的节点在文档中 let canvas = await html2canvas(el, { backgroundColor: null }) mdocument.body.removeChild(el) return canvas.toDataURL()}html2canvas能够胜利导出，然而存在一个问题，就是foreignObject标签里的文本款式会失落：
这应该是html2canvas的一个bug，不过看它这issues数量和提交记录：
指望html2canvas改是不事实的，于是又尝试应用dom-to-image：
import domtoimage from 'dom-to-image'const dataUrl = domtoimage.toPng(el)发现dom-to-image更不行，导出齐全是空白的：
并且它上一次更新工夫曾经是五六年前，所以没方法，只能回头应用html2canvas。
起初有人倡议应用dom-to-image-more，粗略看了一下，它是在dom-to-image库的根底上批改的，尝试了一下，发现的确能够，于是就改为应用这个库，而后又有人反馈在一些浏览器上导出节点内容是空的，包含firefox、360，甚至chrome之前的版本都不行，笔者只能感叹，太难了，而后又有人倡议应用上一个大版本，能够解决在firefox上的导出问题，然而笔者试了一下，在其余一些浏览器上仍旧存在问题，于是又在思考要不要换回html2canvas，尽管它存在肯定问题，但至多不是齐全空的。
解决foreignObject标签内容在firefox浏览器上无奈显示的问题
用的人多了，这个问题又有人提了进去，于是笔者又尝试看看能不能解决，之前始终认为是firefox浏览器的问题，毕竟在chrome和opera上都是失常的，这一次就想会不会是svgjs库的问题，于是就去搜它的issue，没想到，还真的搜进去了issue，粗心就是因为通过SVG办法转换的dom节点是在svg的命名空间下，也就是应用document.createElementNS办法创立的，导致局部浏览器渲染不进去，归根结底，这还是不同浏览器对于标准的不同实现导致的：
你说chrome很强吧，的确，然而无形中它阻止了问题的裸露。
晓得了起因，那么批改也很简略了，只有将SVG办法第二个参数设为true即可，或者本人来创立节点也能够：
foreignObject.add(document.createElemnt('div'))果然，在firefox浏览器上失常渲染了。
解决img联合canvas导出图片为空的问题
解决了在firefox浏览器上foreignObject标签为空的问题后，天然会狐疑之前应用img联合canvas导出图片时foreignObject标签为空会不会也是因为这个问题，同时理解了一下dom-to-image库的实现原理，发现它也是通过将dom节点增加到svg的foreignObject标签中实现将html转换成图片的，那么就很搞笑了，我自身要转换的内容就是一个嵌入了foreignObject标签的svg，应用dom-to-image转换，它会再次把传给它的svg增加到一个foreignObject标签中，这不是套娃吗，既然dom-to-image-more能通过foreignObject标签胜利导出，那么不必它必然也能够，到这里根本确信之前不行就是因为命名空间的问题。
果然，在去掉了dom-to-image-more库后，从新应用之前的形式胜利导出了，并且在firefox、chrome、opera、360等浏览器中都不存在问题，兼容性反而比dom-to-image-more库好。
总结
尽管笔者的实现很简略，然而dom-to-image-more这个库实际上有一千多行代码，那么它到底多做了些什么呢，点个关注，咱们下一篇文章再见。