文章目录
背景
前端同学在1k分辨率的屏幕上、开发8k分辨率的大屏（分辨率为8320 * 4320），为了能够在1k屏幕上正常显示，一般会根据真实屏幕大小进行动态计算，然后进行缩放（过程略过，大家可自行实现）以达到正常显示的效果。
现在有个弹框的内容，需要保存为图片，如下面的下载按钮，需要把内容下载为图片
常规方案
一般情况下，我们会使用html2canvas 来保存内容为图片。
安装依赖
yarn add html2canvas
引入依赖
import html2canvas from "html2canvas";
使用
给需要保存为图片的div区域加一个id名称downloadArea，然后在点击下载按钮时，执行以下方法：
// 下载
function handleDownload() {
let el = document.getElementById("downloadArea");
let options = {
width: el.offsetWidth,
height: el.offsetHeight,
useCORS: true, // 是否尝试使用 CORS 从服务器加载图像
allowTaint: false, // 是否允许跨源图像污染画布
backgroundColor: "#121c2f", // 背景色
}
html2canvas(el, options).then((canvas) => {
saveAs(canvas.toDataURL('image/jpeg'));
});
}
function saveAs(dataUrl) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = `巡检统计_${new Date().getTime()}.jpg`;
link.click();
link.remove();
}
以上是常规的解决方案，对大多数情景都是很适用的。
出现问题
但是，当你兴冲冲地点击下载时，你看到导出的图片，文字大小没有缩放，如下所示：
html2canvas 原理解析
- 解析 DOM 结构
- html2canvas 首先会遍历目标 DOM 节点及其所有子节点。它会获取每个节点的位置（offsetLeft、offsetTop）、尺寸（offsetWidth、offsetHeight）、样式（包括width、height、background - color、border等各种 CSS 属性）等信息。例如，对于一个 元素，它会读取该元素的内联样式以及通过 CSS 类或 ID 应用的外部样式。
- 这个过程类似于浏览器渲染引擎在布局阶段对 DOM 树的处理。它会构建一个内部的数据结构来存储这些信息，为后续的绘制工作做准备。
- 创建画布（Canvas）
- 在获取 DOM 信息后，html2canvas 会创建一个 HTML5 的Canvas元素。Canvas提供了一组用于在网页上绘制图形的 JavaScript API。例如，canvas.getContext(‘2d’)可以获取一个二维绘图上下文，用于绘制直线、矩形、圆形等各种图形。
- 画布的大小通常会根据要捕获的 DOM 元素的大小来设置，以确保能够完整地容纳目标内容。
- 绘制 DOM 内容到画布
- 对于文本内容，html2canvas 会使用Canvas的文本绘制函数，如fillText来将文本绘制到画布上。它会根据之前获取的字体样式（字体家族、字体大小、字体颜色等）来设置文本的样式。
- 对于图像元素（
<img>），它会获取图像的源（src）属性，通过drawImage函数将图像绘制到画布上。如果图像还没有加载完成，html2canvas 可能会等待图像加载后再进行绘制。 - 对于其他元素，如背景颜色、边框等样式，也会通过相应的Canvas API 来实现。例如，fillStyle和strokeStyle用于设置填充颜色和边框颜色，fillRect和strokeRect用于绘制矩形的填充部分和边框。
- 将画布内容转换为图片数据
- 当所有 DOM 内容都被正确地绘制到画布上后，html2canvas 会使用toDataURL方法将画布的内容转换为一个数据 URL。数据 URL 是一种可以直接在 HTML 中作为图像源（src）使用的格式，它以data:image/png;base64,开头，后面跟着经过 Base64 编码的图像数据。
- 这个数据 URL 可以用于在新的
<img>标签中显示，或者通过download属性让用户下载生成的图像。
局限性
html2canvas 在某些复杂的文本缩放场景下可能会出现问题。比如，它对一些 CSS3 的高级文本缩放特性支持可能有限。如果使用了transform: scale()等 CSS 属性来缩放文本和它的容器，html2canvas 可能不会完全按照浏览器渲染的效果进行捕获。
解决方案
小编盲猜一种思路(未尝试)：在获取该id后：let el = document.getElementById("downloadArea");，给el加一个class样式，该样式仅在点击下载时才生效，然后写对应的样式。
简单的说就说：显示时是一种样式、下载时是另一种样式。
但是这样比较麻烦，那么有没有简单的方法呢？
这个问题问得好，有啊！
dom-to-image库
我们可以使用dom-to-image来做替代方案
安装依赖
yarn add dom-to-image
引入dom-to-image
import domToImage from 'dom-to-image';
使用
基本同上述的html2canvas写法
// 下载
function handleDownload() {
const element = document.getElementById('downloadArea')
element.style.backgroundColor = '#121c2f'
const canvas = document.createElement('canvas')
canvas.width = element.offsetWidth
canvas.height = element.offsetHeight
domToImage.toPng(element).then(function (canvas) {
saveAs(canvas)
})
}
function saveAs(dataUrl) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = `巡检统计_${new Date().getTime()}.jpg`;
link.click();
link.remove();
}
这么做以后，我们看到下载的图片一切正常了，如下所示：
可以看到，分辨率为：2775 * 6280，也是8k分辨率下的弹框。
至此，完美解决。
dom - to - image 原理
创建虚拟 DOM 副本
- dom - to - image 首先会创建一个目标 DOM 元素的虚拟副本。这个副本与原始 DOM 在结构和样式上是相似的，但它是在内存中独立的一个表示。它会递归地遍历目标 DOM 树，复制每个节点的属性和样式信息。
- 例如，对于一个包含多个子元素的
元素，它会复制 本身的样式（如width、height、background - color等），以及每个子元素（如 、等）的样式和内容。
渲染虚拟 DOM 为 SVG 或其他格式
- 之后，dom - to - image 会将这个虚拟 DOM 渲染为 SVG（可缩放矢量图形）或其他矢量图形格式。SVG 是一种基于 XML 的矢量图形格式，它可以精确地描述图形的形状、颜色、位置等信息。
- 如果目标是保存为 PNG 等光栅图像格式，它会将 SVG 进一步转换。这个转换过程涉及到将矢量图形转换为像素点阵的形式，类似于在图形设计软件中导出图像的过程。
导出为图片数据
- 对于 SVG 格式，它可以直接作为一个独立的图形文件保存，或者通过一些工具将其转换为其他格式（如 PNG、JPEG 等）。如果是直接转换为 PNG 等格式，它会使用相关的图形处理库或浏览器的图形转换功能来完成转换。
- 最终，生成的图片数据可以像 html2canvas 一样，通过数据 URL 的形式提供给用户下载或在页面中显示。
dom-to-image的相关方法
附上dom-to-image的相关方法，以下参考其他博主的
