整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

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

者开源了一个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这个库实际上有一千多行代码，那么它到底多做了些什么呢，点个关注，我们下一篇文章再见。

下将以Linux为例

一、Linux安装chrome

获取安装包

# wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm

安装依赖

# yum install -y lsb

# yum install -y libXScrnSaver

# yum install liberation-fonts

# yum install vulkan

本地安装

# yum localinstall google-chrome-stable_current_x86_64.rpm

命令执行完成以后可通过以下命令查看chrome的版本

# google-chrome -version

如果正常显示chrome版本号表示我们的chrome已经安装完成

二、生成图片和PDF文件

1、生成图片


#通过URL地址生成

google-chrome --headless --disable-gpu --screenshot=/data/app-server/google/2.png --window-size=630,1100 --hide-scrollbars --no-sandbox https://resource.xgjk.info/form/1660635773921_1973.html


#通过本地文件生成

google-chrome-stable --no-sandbox --headless --disable-gpu --screenshot=test.png -run-all-compositor-stages-before-draw --window-size=400,1200 /data/app-server/google/chufang.html


2、生成PDF


#通过URL地址生成

google-chrome --headless --disable-gpu --no-sandbox --print-to-pdf-no-header --print-to-pdf=/data/app-server/google/18.pdf https://resource.xgjk.info/form/1660635773921_1973.html


#通过本地文件生成

google-chrome --headless --disable-gpu --no-sandbox --print-to-pdf-no-header --print-to-pdf=/data/app-server/google/18.pdf /data/app-server/google/chufang.html


--screenshot 图片位置

--window-size 图片宽高

--print-to-pdf PF文件位置

们经常写 HTML 、 CSS 和 JavaScript ，写好这些之后，我们就会在浏览器中看到页面，那浏览器究竟在这背后做了一些什么事情呢？本篇文章将揭晓答案！

了解浏览器的渲染原理是我们在通往更深层次的前端开发中不可缺少的，它可以让我们从更深层次、角度去考虑性能优化等～

下面进入正文～

进程、线程

浏览器会分配一个线程“自上而下，从左到右”依次解析和渲染代码，那么进程和线程是什么，它们之间有着怎样的关系呢？

进程

一个进程就是一个程序运行的实例。当启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码，运行中的数据和一个执行任务的主线程，这样的一个运行环境就叫进程

线程

线程不能单独存在，它是由进程来启动和管理的。线程依附于进程，进程中使用多线程并行处理能提升运算效率

两者之间的关系

1、进程中的任意一线程执行出错，都会导致整个进程的崩溃

2、线程之间可以共享数据

3、当一个进程关闭后，操作系统会回收进程所占用的内存

4、进程之间的内容相互隔离

渲染机制

从HTML、CSS和JavaScript开始

了解浏览器的渲染原理，我们就要从理解 HTML 、 CSS 和 JavaScrip 开始，我们先来看一张图

HTML (超文本标记语言)，顾名思义，由标记（标签）和文本组成，每个标签都有自己的语意，浏览器会根据标签和文本展示对应的内容。

CSS (层叠样式表)，由选择器和属性组成，它可以改变 HTML 的样式，比如上图中，我们改变了 span 的颜色由蓝色为绿色。

JavaScript ，我们可以通过 JS 完成很多事情，例如上图中修改样式。

下面开始分析渲染的原理

渲染流水线

渲染模块由于渲染的机制的复杂，被划分为了很多子阶段，输入的 HTML 经过这些子阶段，最后会输出为像素。这样的处理流程就叫做 渲染流水线

按照渲染的时间顺序，流水线可分为几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成

构建DOM树

由于浏览器无法直接理解和使用 HTML ,所以需要将 HTML 转换为浏览器能够理解的结构（ DOM 树）

树结构示意图

DOM树的构建过程

我们来分析一下下面这段代码会构建出一棵什么样的 DOM 树

我们先将上面的代码运行，然后在浏览器控制台输入 document ，看看会有什么效果

我们一层级一层级的打开就会看到如上图的效果，我们可以根据这每一层级展开的效果，绘制出一棵 DOM 树结构，如下：

接下来，我们试一下利用 JS 修改一下内容，看有什么改变：

我们可以看到“浏览器”的文字变成了“chrome”

再来看一下 DOM 树是否有改变

我们看到在“浏览器”的位置换成了“chrome”，那么如何让 DOM 节点拥有样式？

样式计算

样式计算，顾名思义，就是 计算出 DOM 节点中每个元素的具体样式 ，这个阶段会分为三部分：

  • 把 CSS 转换为浏览器能够理解的结构
  • 转换样式表中的属性值，使其标准化
  • 计算出 DOM 树中每个节点的样式

CSS样式来源

  • link 导入外部样式资源

浏览器会新开辟一个线程，去服务器获取对应的资源文件（不阻碍主线程的渲染）

  • style 内嵌样式

从上到下解析，解析完继续解析 DOM 结构。在真实项目中，如果 css 代码不是很多，或是移动端项目，我们应该使用内嵌式，以此来减少 http 资源的请求，提高页面渲染速度

  • 行内样式
  • @import 导入

它是同步的，不会开辟新线程去加载资源文件，而是让主线程去获取，这阻碍 DOM 结构的继续渲染；只有把外部样式导入进来，并且解析后，才会继续渲染 DOM 结构

把CSS转换为浏览器能够理解的结构

浏览器就像不能理解 HTML 一样，不理解 CSS ，所以当渲染引擎接收到 CSS 文件时，会执行转换操作，将 CSS 文本转换为浏览器可以理解的 styleSheets 结构。

在 HTML 中，在浏览器中输入 document 可以查看 html 的结构。在 css 中，可以输入 document.styleSheets 看到 css 的结构

现在的结构是空的，我们来加一些样式，看看效果

转换样式表中的属性值，使其标准化

属性值标准化就是将所有值转换为渲染引擎容易理解的、标准化的计算值。我们大致看一下效果：

  • 标准化前
body {
    font-size: 2em;
    color: black;
    font-weight: bold;
    ...
}
复制代码
  • 标准化后
body {
    font-size: 16px;
    color: rgb(0, 0, 0);
    font-weight: 700;
    ...
}
复制代码

计算出DOM树中每个节点的具体样式

样式计算有两个CSS的规则：继承规则和层叠规则

  • CSS继承规则

CSS 继承就是每个 DOM 节点都包含有父节点的样式。我们来看一下下面这段代码中如何应用到 DOM 节点上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color: red;
        }

        div {
            color: blue;
        }

        span {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>掘金</h1>
    <div>
        <span>浏览器</span>
        <span>渲染原理</span>
        构建DOM树
    </div>
</body>
</html>
复制代码

子节点会拥有父节点的样式，由此我们可以画出这样一张图

我们还可以打开控制台，看一下选中 span 标签，都会看到哪些内容

通过上图，我们可看到一个元素的样式、继承过程等， userAgent 样式是浏览器默认的内置样式，如果我们不提供任何样式，就会使用此样式。

  • 样式层叠规则

层叠在 CSS 处于核心地位，它是 CSS 的一个基本特征，它定义了如何合并来自多个源的属性值的算法。

样式计算阶段最终输出的内容是每个 DOM 节点的样式，并且保存在了 ComputedStyle 中。我们可以通过控制台看到某个 DOM 元素最终的计算样式

布局阶段

现在我们不知道 DOM 元素的几何位置信息，所以现在我们需要计算出 DOM 树中可见元素的几何位置，这个计算过程就叫做布局。布局阶段有两个过程：

  • 创建布局树
  • 布局计算

创建布局树

创建布局树的意思就是创建一棵只包含可见元素的树。我们来看下面一段代码创建布局树的过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color: red;
        }

        div {
            color: blue;
        }

        div span {
            font-size: 16px;
        }

        div span:last-child {
            display: none;
        }
    </style>
</head>
<body>
    <h1>掘金</h1>
    <div>
        <span>浏览器</span>
        <span>渲染原理</span>
        构建DOM树
    </div>
</body>
</html>
复制代码

构建布局树的过程中， DOM 树中所有不可见的节点都不会包含在这棵树中。浏览器会遍历 DOM 树中所有能看见的节点，然后把这些节点加入到布局中；不可见的节点就会被忽略， head 标签下面的内容、 div 下最后一个 span 节点都不会在布局树中，我们看一下这个过程图感受一下～

布局计算

布局计算就是计算布局树节点的坐标位置。这个计算过程极为复杂。

分层

渲染引擎会为特定的节点生成专用的图层，并生成一棵对应的图层树。这样做是因为页面中可能含有很多复杂的效果，我们可以打开控制台看一下页面的分层情况

我们可以看到，渲染引擎给页面分了很多图层，这些图层会按照一定顺序叠加在一起，形成最终的页面

那么图层的来源有哪些？

1、拥有层叠上下文属性的元素会被提升为单独的一层

层叠上下文可以使能够使 HTML 元素具有三维的概念，这些 HTML 元素按照自身属性的优先级分布在垂直于这个二维平面的 z 轴上。哪些元素具有层叠上下文属性？

2、需要剪裁的地方会被创建为图层

当我们创建一个有宽度和高度的 div 时，里面的文字内容可能会超出这个区域，这时候渲染引擎会把裁剪文字内容的一部分用于显示在 div 区域，例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: yellow;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        我们经常写`HTML`、`CSS`和`JavaScript`，写好这些之后，我们就会在浏览器中看到页面，那浏览器究竟在这背后做了一些什么事情呢？本篇文章将揭晓答案！

        了解浏览器的渲染原理是我们在通往更深层次的前端开发中不可缺少的，它可以让我们从更深层次、角度去考虑性能优化等～
    </div>
</body>
</html>
复制代码

运行结果

我们再打开控制台的 layers 看一下效果

可以看到渲染引擎为文字部分单独创建了一个图层。

在布局树中的节点如果拥有对应的图层，这个节点就是一个图层，如果没有，这个节点就属于父节点的图层，如下图：

图层绘制

创建好图层树后，渲染引擎会绘制图层树中的每个图层。渲染引擎会将图层绘制分解为很多小的绘制指令，然后将这些指令按照顺序组成待绘制列表，我们可以打开控制台的 layers ，选择 document 层，看一下效果

栅格化操作

栅格化就是将图块转换位位图，图块是栅格化执行的最小单位。渲染进程维护了一个栅格化的线程池，所有图块的栅格化都是在线程池内执行的。

图层绘制列表准备好之后，主线程会把这个绘制列表提交给合成线程，绘制操作由渲染引擎中的合成线程来完成。

合成线程将图层划分为图块，然后合成线程会按照视口（可见区域）附近的图块优先生成位图。

合成与显示

所有的图块都被光栅化后，合成线程会生成一个绘制图块的命令（ DrawQuad ），然后将该命令提交给浏览器进程。浏览器进程里面 viz 组件用来接收 DrawQuad 命令，将其页面内容绘制到内存中，最后将内存显示到屏幕。这个时候，我们就看到了页面

完善渲染流水线示意图

根据上文中描述，我们可以画出这样一张图

我还在网上找到了另外一张图

这两张图都是描述浏览器的渲染流程的。


在线咨询
上一篇：前端：JS延长加载的方式有哪些？
下一篇：HTML5 是什么鬼？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 蓬溪县 魏都区 石首市 温宿县 平安县 咸安区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服