知识就是金钱之：js中关于Blob对象的介绍与使用

lob对象介绍

一个Blob对象表示一个不可变的,原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。

创建blob对象

创建blob对象本质上和创建一个其他对象的方式是一样的，都是使用Blob()的构造函数来进行创建。构造函数接受两个参数：

第一个参数为一个数据序列，可以是任意格式的值。

第二个参数是一个包含两个属性的对象{type:MIME的类型,endings:决定第一个参数的数据格式，可以取值为"transparent"或者"native"（transparent的话不变，是默认值，native的话按操作系统转换）。}

Blob()构造函数允许使用其他对象创建一个Blob对象，比如用字符串构建一个blob

既然是对象，那么blob也拥有自己的属性以及方法

属性

布尔值，指示Blob.close()是否在该对象上调用过。关闭的blob对象不可读。

Blob对象中所包含数据的大小（字节）。

一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。

方法

关闭Blob对象，以便能释放底层资源。

返回一个新的Blob对象，包含了源Blob对象中指定范围内的数据。其实就是对这个blob中的数据进行切割，我们在对文件进行分片上传的时候需要使用到这个方法。

看到上面这些方法和属性，使用过HTML5提供的File接口的应该都很熟悉，这些属性和方法在File接口中也都有。其实File接口就是基于Blob，继承blob功能并将其扩展为支持用户系统上的文件，也就是说：

File接口中的Flie对象就是继承与Blob对象。

blob对象的使用

上面说了很多关于Blob对象的一些概念性的东西，下面我们来看看实际用途。

分片上传

首先说说分片上传，我们在进行文件上传的时候，因为服务器的限制，会限制每一次上传到服务器的文件大小不会很大，这个时候我们就需要把一个需要上传的文件进行切割，然后分别进行上传到服务器。

假如需要做到这一步，我们需要解决两个问题:

首先怎么切割的问题上面已经有过说明，因为File文件对象是继承与Blob对象的，因此File文件对象也拥有slice这个方法，我们可以使用这个方法将任何一个File文件进行切割。

代码如下：

通过上面的方法。我们就得到了一个切割之后的File对象组成的数组blobs；

接下来要做的时候就是讲这些文件分别上传到服务器。

在HTTP1.1以上的协议中，有Transfer-Encoding这个编码协议，用以和服务器通信，来得知当前分片传递的文件进程。

这样解决了这两个问题，我们不仅可以对文件进行分片上传，并且能够得到文件上传的进度。

粘贴图片

blob还有一个应用场景，就是获取剪切板上的数据来进行粘贴的操作。例如通过QQ截图后，需要在网页上进行粘贴操作。

粘贴图片我们需要解决下面几个问题

首先我们可以通过paste事件来监听用户的粘贴操作:

然后通过事件对象中的clipboardData对象来获取图片的文件数据。

clipboardData对象介绍

介绍一下clipboardData对象，它实际上是一个DataTransfer类型的对象，DataTransfer是拖动产生的一个对象，但实际上粘贴事件也是它。

clipboardData的属性介绍

items介绍

items是一个DataTransferItemList对象，自然里面都是DataTransferItem类型的数据了。

属性

items的DataTransferItem有两个属性kind和type

方法

在原型上还有一些其他方法，不过在处理剪切板操作的时候一般用不到了。

type介绍

一般types中常见的值有text/plain、text/html、Files。

有了上面这些方法，我们可以解决第二个问题即获取到剪切板上的数据。

最后我们需要将获取到的数据渲染到网页上。

其实这个本质上就是一个类似于上传图片本地浏览的问题。我们可以直接通过HTML5的File接口将获取到的文件上传到服务器然后通过讲服务器返回的url地址来对图片进行渲染。也可以使用fileRender对象来进行图片本地浏览。

fileRender对象简介

从Blob中读取内容的唯一方法是使用FileReader。

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

通过上面的方法以及事件，我们可以发现，通过readAsDataURL方法及onload事件就可以拿到一个可本地浏览图片的DataURL。

最终代码如下：

这样我们就可以监听到用户的粘贴操作，并且将用户粘贴的图片文件实时的渲染到网页之中了。

总结

以上是我对Blob对象的一些学习分享，希望在实际应用上能对大家有所帮助。也希望大家多多支持小编。

问题复现

之前在做 html 内容导出为 pdf、图片时，先是用 html2canvas 生成截屏，再进一步转换为 pdf 文件，感兴趣的同学可以看下这篇一文搞定前端 html 内容转图片、pdf 和 word 等文件，截图得到的图片内容、质量都没有什么问题。

不过最近有个同事反应，他导出的图片有 bug，这我倒挺好奇的，因为这个导出功能已经用了很久，并没有人反馈过有问题（除了那个 pdf 翻页内容被截断的问题，求助 jym ：前端有好的解决方法吗？），于是我要了他的文档，果不其然，出现了下面红框所示的问题。

检查一下它的 DOM 结构，发现是下面这样，猜测是就是这个原因导致的。

为了验证自己的猜想，浅浅调试一下 html2canvas 的源码，看下 html2canvas 是怎样一个流程，它是如何将 html内转成 canvas 的。

调试开始

在 html2canvas 执行的地方打个断点，开始调试代码：

进入 html2canvas 内部，可以看到内部执行的是 renderElement 方法：

咱们直接进入到 renderElement 方法内部，看下它的执行流程：

renderElement 执行流程

判断传入节点是否有效

Node.ownerDocument：只读属性，返回当前节点的顶层的 document 对象；
document.defaultView：属性返回当前 document 对象所关联的 window 对象，如果没有，会返回 null。

这里主要判断节点，快速跳过，继续执行。

合并配置项

将用户传入的 options 与默认的 options 合并

构建配置项，将传入的 opts 与默认配置合并，同时初始化一个 context 上下文对象（缓存、日志等）：

缓存对象 cache

其中 cache 为缓存对象，主要是避免资源重复加载的问题。

原理如下：

如果遇到图片链接为 blob，在加载完成后，会添加到缓存 _cache 中：

下次使用直接通过 this._cache[src] 从缓存中获取，不用再发送请求：

同时，cache 中控制图片的加载和处理，包括使用 proxy 代理和使用 cors 跨域资源共享这两种情况资源的处理。

继续往下执行

克隆原始 DOM

使用 DocumentCloner 方法克隆原始 DOM，避免修改原始 DOM。

使用 clonedReferenceElement 将原始 DOM 进行克隆，并调用 toIFrame 将克隆到的 DOM 绘制到 iframe 中进行渲染，此时在 DOM 树中会出现 class 为 html2canvas-container 的 iframe 节点，通过 window.getComputedStyle 就可以拿到要克隆的目标节点上所有的样式了。

绘制 canvas

前面几步很简单，主要是对传入的 DOM 元素进行解析，获取目标节点的样式和内容。重点是 toCanvas 即将 DOM 渲染为 canvas 的过程，html2canvas 提供了两种绘制 canvas 的方式：

使用 foreignObject 方式绘制 canvas
使用纯 canvas 方法绘制

咱们接着执行，当代码执行到这里时判断是否使用 foreignObject 的方式生成 canvas：

使用 foreignObject方式绘制 canvas

首先了解下 foreignObject 是什么？

svg 中的xmlns 全称是“XML Namespaces”，即 XML 命名空间，正是它的存在，在浏览器中 svg 才能正常渲染（下面这段代码是在 iconfont 上随便复制的一个 icon svg 代码）；
xml复制代码 <svg t="1692613183565" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20058" width="200" height="200">
<path d="M548.571429 292.571429v182.784L731.428571 475.428571v73.142858l-182.857142-0.073143V731.428571h-73.142858V548.498286L292.571429 548.571429v-73.142858l182.857142-0.073142V292.571429h73.142858z" fill="#626B7D" p-id="20059"></path>
</svg>
foreignObject 允许包含来自不同的 XML 命名空间的元素，借助 <foreignObject> 标签，我们可以直接将 DOM 节点作为 foreignObject 插入 SVG 节点中进行渲染，如下：
xml复制代码<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="120" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>测试测试</div>
</body>
</foreignObject>
</svg>
可以看到 <foreignObject> 标签里面有一个设置了 xmlns="http://www.w3.org/1999/xhtml" 命名空间的 <body> 标签，此时 <body> 标签及其子标签都会按照 XHTML 标准渲染，实现了 SVG 和 XHTML 的混合使用。
这样只需要指定对应的命名空间，就可以把它嵌套到 foreignObject 中，然后结合 SVG，直接渲染。
对于不同的命名空间，浏览器解析的方式也不一样，所以在 SVG 中嵌套 HTML，解析 SVG 的时候遇到 http://www.w3.org/2000/svg 转化 SVG 的解析方式，当遇到了 http://www.w3.org/1999/xhtml 就使用 HTML 的解析方式。
这是为什么 SVG 中可以嵌套 HTML，并且浏览器能够正常渲染。
foreignObject 已经支持除 IE 外的主流浏览器

弄懂 foreignObject 后，我们尝试将 foreignObjectRendering 设置为 true，看看它是如何生成 canvas 的：

js复制代码Html2canvas(warp, {
  useCORS: true,
  foreignObjectRendering: true,
})

在此处打个断点：

进入 ForeignObjectRenderer 类中

这里通过 ForeignObjectRenderer 实例化一个 renderer 渲染器实例，在 ForeignObjectRenderer 构造方法中初始化 this.canvas 对象及其上下文 this.ctx

调用 render 生成 canvas，进入到 render 方法：

render 方法执行很简单，首先通过 createForeignObjectSVG 将 DOM 内容包装到<foreignObject>中生成 svg:

生成的 svg 如下所示：

接着通过。loadSerializedSVG 将上面的 SVG 序列化成 img 的 src（SVG 直接内联），调用this.ctx.drawImage(img, ...); 将图片绘制到 this.canvas 上，返回生成好的 canvas 即可。

接着点击下一步，直到回到最开始的断点处，将生成好的 canvas 挂在到 DOM 上，如下：

js
复制代码document.body.appendChild(canvas)

这就解决了？？？收工！！！

NoNoNo，为什么使用纯 canvas 绘制就有问题呢？ 作为 bug 终结者，问题必须找出来，干就完了。

而且使用 foreignObject 渲染还有其他问题，我们后面再说。

foreignObject 绘制 canvas 的流程

首先克隆原始 DOM，并将所有样式都转为行内样式，避免修改到页面；
构建 ForeignObjectRenderer 渲染器实例，调用 renderer 方法；
将 DOM 内容通过 createForeignObjectSVG 转为 svg 元素；
通过 loadSerializedSVG 将上面的 svg 序列化成 img 的 src；
通过 drawImage 绘制图片到 canvas 上。

使用纯 canvas 绘制

要想使用纯 canvas 方式绘制，那么就需要将 DOM 树转换为 canvas 可以识别的数据类型，html2canvas 使用 parseTree 方法来实现转换，我们来看下它的执行过程。

直接在调用 parseTree 方法处打断点，进入到 parseTree 方法内：

parseTree 的作用是将克隆 DOM 转换为 ElementContainer 树。

首先将根节点转换为 ElementContainer 对象，接着再调用 parseNodeTree 遍历根节点下的每一个节点，转换为 ElementContainer 对象。

ElementContainer 对象主要包含 DOM 元素的信息：

ts复制代码type TextContainer = {
  // 文本内容
  text: string;
  // 位置和大小信息
  textBounds: TextBounds[];
}

export class ElementContainer {
  // 样式数据
  readonly styles: CSSParsedDeclaration;
  // 当前节点下的文本节点
  readonly textNodes: TextContainer[] = [];
  //  除文本节点外的子元素
  readonly elements: ElementContainer[] = [];
  // 位置大小信息（宽/高、横/纵坐标）
  bounds: Bounds;
  // 标志位，用来决定如何渲染的标志
  flags = 0;
  ...
}

ElementContainer 对象是一颗树状结构，层层递归，每个节点都包含以上字段，形成一颗 ElementContainer 树，如下：

继续下一步

通过 CanvasRenderer 创建一个渲染器 renderer，创建 this.canvas和this.ctx上下文对象与 ForeignObjectRenderer 类似

得到渲染器后，调用 render 方法将 parseTree 生成的 ElementContainer 树渲染成 canvas，在这里就与 ForeignObjectRenderer 的 render 方法产生差别了。

层叠上下文

概念不懂就看 MDN：层叠上下文

首先我们都知道 CSS 是流式布局，也就是在没有浮动（float）和定位（position）的影响下，是不会发生重叠的，从上到下、由外到内按照 DOM 树去布局。

而浮动和定位的元素会脱离文档流，形成一个层叠上下文，所以如果想正常渲染，就需要得到它们的层叠信息。

可以想象一下：在我们的视线与网页之间有一条看不见的 z 轴，层叠上下文就是一块块薄层，而这些薄层中有很多 DOM 元素，这些薄层根据层叠信息在这个 z 轴上排列，最终形成了我们看到的绚丽多彩的页面。

画个图好像更形象些：

白色为正常元素，黄色为 float 元素，蓝色为 position 元素

更多详细资料请阅读：深入理解 CSS 中的层叠上下文和层叠顺序

canvas 在绘制节点时需要先计算出整个目标节点里子节点渲染时所展现的不同层级，因为 Canvas 绘图需要根据样式计算哪些元素应该绘制在上层，哪些在下层。元素在浏览器中渲染时，根据 W3C 的标准，所有的节点层级布局，需要遵循层叠上下文和层叠顺序的标准。

调用 parseStackingContexts 方法将 parseTree 生成的 ElementContainer 树转为层叠上下文。

ElementContainer 树中的每一个 ElementContainer 节点都会产生一个 ElementPaint 对象，最终生成层叠上下文的 StackingContext 如下：

数据结构如下：

ts复制代码// ElementPaint 数据结构如下
ElementPaint: {
  // 当前元素的container
  container: ElementContainer
  // 当前元素的border信息
  curves: BoundCurves
}

// StackingContext 数据结构如下
{
  element: ElementPaint;
  // z-index为负的元素行测会给你的层叠上下文
  negativeZIndex: StackingContext[];
  // z-index为零或auto、transform或者opacity元素形成的层叠上下文
  zeroOrAutoZIndexOrTransformedOrOpacity: StackingContext[];
  // 定位或z-index大于等于1的元素形成的层叠上下文
  positiveZIndex: StackingContext[];
  // 非定位的浮动元素形成的层叠上下文
  nonPositionedFloats: StackingContext[];
  // 内联的非定位元素形成的层叠上下文
  nonPositionedInlineLevel: StackingContext[];
  // 内联元素
  inlineLevel: ElementPaint[];
  // 非内联元素
  nonInlineLevel: ElementPaint[];
}

渲染层叠内容时会根据 StackingContext 来决定渲染的顺序。

继续下一步，调用 renderStack 方法，renderStack 执行 renderStackContent 方法，咱们直接进入 renderStackContent 内：

canvas 绘制时遵循 w3c 规定的渲染规则 painting-order，renderStackContent 方法就是对此规则的一个代码实现，步骤如下：

此处的步骤 1-7 对应上图代码中的 1-7:

渲染当前层叠上下文的元素的背景和边框；
渲染具有负 z-index 级别的子层叠上下文（最负的第一个）；
对于流式布局、非定位的子元素调用 renderNodeContent 和 renderNode 进行渲染：
渲染所有未定位的浮动子元素，对于其中每一个，将该元素视为创建了一个新的堆栈上下文；
渲染正常流式布局、内联元素、非定位的子元素；
渲染 z-index 为 0 或 auto，或者 transform、opacity 等属性的子元素；
渲染由 z-index 大于或等于 1 的子元素形成的层叠上下文，按 z-index 顺序（最小的在前）。

可以看到遍历时会对形成层叠上下文的子元素递归调用 renderStack，最终达到对整个层叠上下文树进行递归的目的：

而对于未形成层叠上下文的子元素，就直接调用 renderNode 或 renderNodeContent 这两个方法，两者对比，renderNode 多了一层渲染节点的背景色和边框的方法（renderNode 函数内部调用 renderNodeBackgroundAndBorders 和 renderNodeContent 方法）。

renderNodeContent 用于渲染一个元素节点里面的内容，分为八种类型：纯文本、图片、canvas、svg、iframe、checkbox 和 radio、input、li 和 ol。

除了 iframe 的绘制比较特殊：重新生成渲染器实例，调用 render 方法重新绘制，其他的绘制都是调用 canvas 的一些 API 来实现，比如绘制文字主要用 fillText 方法、绘制图片、canvas、svg 都是调用 drawImage 方法进行绘制。

所有可能用到的 API

最终绘制到 this.canvas 上返回，至此，html2canvas 的调试就结束了。

纯 canvas 绘制流程

首先克隆原始 DOM，避免修改到页面；
使用 parseTree 递归遍历 html，生成 ElementContainer 树（与原始 DOM 层级结构类似）；
构建 CanvasRenderer 渲染器实例，调用 renderer 方法；
遍历上一步生成的 ElementContainer，根据层叠规则生成层叠上下文StackingContext（与原始 DOM 层级结构区别较大）；
遍历层叠上下文，递归地对层叠上下文各层中的节点和子层叠上下文进行解析并按顺序绘制在 Canvas 上，针对要绘制的每个节点，主要有以下两个过程：
创建画布，根据上一步生成的层叠对象递归渲染，最终将 html 内容绘制到画布 canvas 上。

针对最初的 Bug 分析

ok，当调试了一遍 html2canvas 的流程之后，再回到我们的问题上，很显然就是 canvas 渲染的时候的问题，也就是 renderNodeContent 方法，那我们直接在这里打个断点进行调试（为了方便我只输入一行文字进行调试），只有当是文本节点时会进入到此断点，等到 mark 标签中对应的元素进入断点时，查看：

可以看到此时 width 和 height 已经是父节点的宽高，果真如此。

解决方案

既然已经知道了问题所在，那么我们开始解决问题，有以下两种解决方案可供参考：

foreignObjectRendering

在 html2canvas 配置中设置 foreignObjectRendering 为 true，此问题就可以解决吗？

然而现实并没有这么简单，这样又会引出新的问题：导出的图片内容丢失

这是为什么呢？

通过 W3C 对SVG 的介绍可知：SVG 不允许连接外部的资源，比如 HTML 中图片链接、CSS link 方式的资源链接等，在 SVG 中都会有限制。

解决方法：需要将图片资源转为 base64，然后再去生成截图，foreighnObject 这种方法更适合截取内容为文字内容居多的场景。

对包含背景色的内联标签截断处理

在对内联元素进行截断前，如何确定 p 标签中的 mark 标签有没有换行？ 因为我们没必要对所有内联标签做处理。

如果 mark 标签的高度超过 p 标签的一半时，就说明已经换行了，然后将 <mark>要求一</mark> 替换为 <mark>要</mark><mark>求</mark><mark>一</mark> 即可，代码如下：

ts复制代码const handleMarkTag = (ele: HTMLElement) => {
  const markElements = ele.querySelectorAll('mark')
  for (let sel of markElements) {
    const { height } = sel.getBoundingClientRect()
    let parentElement = sel.parentElement
    while (parentElement?.tagName !== 'P') {
      parentElement = parentElement?.parentElement!
    }
    const { height: parentHeight } = (
      parentElement as unknown as HTMLElement
    ).getBoundingClientRect()
    // mark的高度没有超过p标签的一半时 则没有换行
    if (height < parentHeight / 2) continue
    // 超过一半时说明换行了
    const innerText = sel.innerText
    const outHtml = sel.outerHTML
    let newHtml = ''
    innerText.split('')?.forEach((text) => {
      newHtml += outHtml.replace(innerText, text)
    })
    sel.outerHTML = newHtml
  }
}

ok，再次尝试一下，完美解决，这下可以收工了。

总结

通过对一个不是 bug 的 bug 的分析，尝试调试了一遍 html2canvas 的代码，弄懂了浏览器截图的原理及 html2canvas 的核心流程，并从中学到了几点新知识：

svg xmnls 作用以及渲染 HTML 内容的 foreignObject 标签；
使用 foreignObject 实现快速截图的方法；
CSS 层叠上下文的概念；
canvas 绘图的一些方法。。。

发现 canvas 真是一个有趣的东西，什么都能画，像我现在用于画图的工具excalidraw、图表库g6、g2、echarts都是用的 canvas 搞的，看来得抽时间学习一下 canvas，不要等到“书到用时方恨少“。

以上就是本文的全部内容，希望这篇文章对你有所帮助，欢迎点赞和收藏，如果发现有什么错误或者更好的解决方案及建议，欢迎随时联系。

作者：翔子丶链接：https://juejin.cn/post/7277045020423798840 来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

、Blob（Binary Large Object）定义：二进制类型的大对象数据，在 JavaScript 中 Blob 对象表示不可变的原始数据。

2、语法：

var aBlob = new Blob(blobParts, options);

其中：blobParts是一个由 ArrayBuffer、Blob、DOMString 等对象构成的数组；options是一个可选项，由type和endings组成，type代表了被放入到 blob 中的内容的 MIME 类型，endings用于指定包含行结束符 \n 的字符串如何被表示（native表示行结束符\n被更改为适合宿主操作系统的换行符，transparent会保持 blob 中保存的行结束符不变）。

定义Blob

3、Blob属性和方法：两个只读属性size和type，其中size属性用于表示数据的大小（以字节为单位），type 属性为MIME 类型的字符串。slice([start[, end[, contentType]]])返回一个源指定范围内的Blob 对象；stream()返回一个读取 blob 内容的ReadableStream；text()返回一个 Promise 对象且包含 blob 所有内容的 UTF-8 格式的 USVString；arrayBuffer()返回一个 Promise 对象且包含 blob 所有内容的二进制格式的 ArrayBuffer。

Blob属性和方法

4、Blob URL/Object URL 是一种伪协议，允许 Blob作为链接的URL源，如a.href、img.src等。

创建 Blob URL：url=URL.createObjectURL(Blob)，览器器为 URL.createObjectURL 生成的 URL 存储了一个 URL → Blob 映射，此类 URL 较短，例如

blob:http://domain/b3ad7623-60bb-4eff-9b9d-f925438b97c7

Blob 本身仍驻留在内存中，在不需要时，可以调用URL.revokeObjectURL(url)来删除引用。

5、base64也可以作为<img src= />的源，格式为

data:[<mediatype>][;base64],<data>

其中mediatype 是个MIME 类型的字符串，如 image/png，默认值为 text/plain;charset=US-ASCII，例如：

在线咨询

上一篇：js入门三部曲「第二部」ep04 html代码的基本结构#js
下一篇：如何把电子书转换成适合Kindle 的格式？这是最全的攻略

您的项目需求

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

整合营销服务商