探索如何将html和svg导出为图片
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
笔者开源了一个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
这个库实际上有一千多行代码那么它到底多做了些什么呢点个关注我们下一篇文章再见。
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |