文章目录

• 背景
• 常规方案
• 出现问题
• html2canvas 原理解析
• 局限性
• 解决方案
• dom-to-image库
• dom - to - image 原理
• dom-to-image的相关方法

背景

前端同学在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的相关方法，以下参考前端将dom转换成图片_dom-to-image-CSDN博客的