Dom-to-image

已于 2022-12-01 13:26:50 修改
阅读量1.4k 收藏 2
点赞数 2
分类专栏： DOM Javascript Html 文章标签： javascript npm 前端
于 2021-07-26 15:39:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SeriousLose/article/details/119110978
版权
Javascript 同时被 3 个专栏收录
98 篇文章 1 订阅
订阅专栏
Html
17 篇文章 0 订阅
订阅专栏
DOM
16 篇文章 1 订阅
订阅专栏

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

使用svg的一个特性，允许在<foreignobject>标签中包含任意的html内容。

  • 主要是 [XMLSerializer |dom转为svg]

  • dom 转换为 XHTML

    • XMLSerializer 对象使你能够把一个 XML 文档或 Node 对象转化或“序列化”为未解析的 XML 标记的一个字符串要使用一个 XMLSerializer，使用不带参数的构造函数实例化它 ，然后调用其 serializeToString() 方法；

    • 递归去克隆dom节点

      • 遇到canvas转为image对象
      • 提取元素computed样式,并且插到新建的style标签上面,对于":before,:after"这些伪元素，会提取其样式，放到新建样式名中并且插入到新建的style标签中，供所属的节点使用。
      • 处理输入内容和svg。

    • 插入字体

      • 获取所有样式表并处理为数组，提取包含 rule.type === CSSRule.FONT_FACE_RULE 规则，再提取包含 src 的 rules。
      • 下载资源，将资源转为dataUrl并给 src 使用。

    • 处理图片  图片都处理为dataUrl

    • 示例一

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body onload="load()">
    <div id="long">
      <span>1111</span>
      <h1>222222</h1>
      hello SeriousLose</div>
  </body>
</html>
<script>
  function load() {
    let long = document.getElementById('long');
    let xmlStr = new XMLSerializer();
    let xml = xmlStr.serializeToString(long);
    console.log(xml);
    let dom = `data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 200 200" xmlns="<http://www.w3.org/2000/svg>">
      <style>
        polygon { fill: black }

        div {
          color: white;
          font:12px serif;
          height: 100%;
          overflow: auto;
        }
      </style>

      <polygon points="5,5 195,10 185,185 10,195" />

      <!-- Common use case: embed HTML text into SVG -->
      <foreignObject x="20" y="20" width="160" height="160">
      ${xml}
      </foreignObject>
    </svg>`;

    let img = new Image();
    img.src = dom;
    document.body.appendChild(img);
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      ctx.drawImage(img, 0, 0);
      canvas.toBlob(function (blob) {
        let url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        document.body.appendChild(a);
        a.href = url;
        a.download = 'image';
        a.click();
        window.URL.revokeObjectURL(url);
      }, 'image/png');
    };
  }
</script>

  • 使用svg中的<foreignobject>

    • 序列化dom节点为字符串，然后在 foreignObject 嵌入转换好的字符串，
    • foreignObject 能够在 svg 内部嵌入XHTML，再将svg处理为dataUrl数据

  • 用 canvas 渲染出处理好的 dataUrl 数据

  • canvas转化为 bold类型；

源码地址 dom-to-image/dom-to-image.js at master · tsayen/dom-to-image · GitHub

// toPng 方法

  function toPng(node, options) {
    return draw(node, options || {}).then(function (canvas) {
      return canvas.toDataURL();
    });
  }

// draw 方法

  function draw(domNode, options) {
    // 将dom节点转为svg
    return toSvg(domNode, options)
      // 拿到的svg是image data URL,这里进一步通过svg创建图片
      .then(util.makeImage)
      .then(util.delay(100))
      .then(function (image) {
        // 通过图片创建canvas并返回
        var canvas = newCanvas(domNode);
        canvas.getContext("2d").drawImage(image, 0, 0);
        return canvas;
      });
    // 新建canvas节点，处理dataUrl资源，和options参数
    function newCanvas(domNode) {
      var canvas = document.createElement("canvas");
      canvas.width = options.width || util.width(domNode);
      canvas.height = options.height || util.height(domNode);

      if (options.bgcolor) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = options.bgcolor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }

      return canvas;
    }
  }

// toSvg

  function toSvg(node, options) {
    options = options || {};
    copyOptions(options);
    return Promise.resolve(node)
      .then(function (node) {
       // 递归克隆dom节点
        return cloneNode(node, options.filter, true);
      })
       // 嵌入字体,找出所有font-face样式,添加入一个新的style里面
      .then(embedFonts)
       // 将图片链接转换为dataUrl形式使用
      .then(inlineImages)
       // 将options里面的一些style放进style里面
      .then(applyOptions)
      .then(function (clone) {
        // 创建svg，将dom节点通过 XMLSerializer().serializeToString() 序列化为字符串
        // 然后用 foreignObject 包裹，就能将dom转为svg。
        return makeSvgDataUri(
          clone,
          options.width || util.width(node),
          options.height || util.height(node)
        );
      });
    // 处理一些options的样式
    function applyOptions(clone) {
      if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;

      if (options.width) clone.style.width = options.width + "px";
      if (options.height) clone.style.height = options.height + "px";

      if (options.style)
        Object.keys(options.style).forEach(function (property) {
          clone.style[property] = options.style[property];
        });

      return clone;
    }
  }

// cloneNode

 function cloneNode(node, filter, root) {
    if (!root && filter && !filter(node)) return Promise.resolve();
    return Promise.resolve(node)
      .then(makeNodeCopy)
      .then(function (clone) {
        return cloneChildren(node, clone, filter);
      })
      .then(function (clone) {
        return processClone(node, clone);
      });

    function makeNodeCopy(node) {
      // 遇到canvas转为image对象
      if (node instanceof HTMLCanvasElement)
        return util.makeImage(node.toDataURL());
      // 克隆第一层
      return node.cloneNode(false);
    }
    // 克隆子节点
    function cloneChildren(original, clone, filter) {
      var children = original.childNodes;
      if (children.length === 0) return Promise.resolve(clone);
    
      return cloneChildrenInOrder(clone, util.asArray(children), filter).then(
        function () {
          return clone;
        }
      );
      // 递归克隆
      function cloneChildrenInOrder(parent, children, filter) {
        var done = Promise.resolve();
        children.forEach(function (child) {
          done = done
            .then(function () {
              return cloneNode(child, filter);
            })
            .then(function (childClone) {
              if (childClone) parent.appendChild(childClone);
            });
        });
        return done;
      }
    }

    function processClone(original, clone) {
      if (!(clone instanceof Element)) return clone;

      return Promise.resolve()
        .then(cloneStyle)
        .then(clonePseudoElements)
        .then(copyUserInput)
        .then(fixSvg)
        .then(function () {
          return clone;
        });
      // 克隆节点上面所有使用的样式。
      function cloneStyle() {
        // 顺便提提，为什么不用style，因为如果什么样式也没有设置的话，style是光秃秃的
        // 而getComputedStyle则能获取到应用在节点上面所有样式
        copyStyle(window.getComputedStyle(original), clone.style);

        function copyStyle(source, target) {
          if (source.cssText) target.cssText = source.cssText;
          else copyProperties(source, target);

          function copyProperties(source, target) {
            util.asArray(source).forEach(function (name) {
              target.setProperty(
                name,
                source.getPropertyValue(name),
                source.getPropertyPriority(name)
              );
            });
          }
        }
      }
      // 提取伪类样式，放到css
      function clonePseudoElements() {
        [":before", ":after"].forEach(function (element) {
          clonePseudoElement(element);
        });

        function clonePseudoElement(element) {
          var style = window.getComputedStyle(original, element);
          var content = style.getPropertyValue("content");

          if (content === "" || content === "none") return;

          var className = util.uid();
          clone.className = clone.className + " " + className;
          var styleElement = document.createElement("style");
          styleElement.appendChild(
            formatPseudoElementStyle(className, element, style)
          );
          clone.appendChild(styleElement);
          function formatPseudoElementStyle(className, element, style) {
            var selector = "." + className + ":" + element;
            var cssText = style.cssText
              ? formatCssText(style)
              : formatCssProperties(style);
            return document.createTextNode(selector + "{" + cssText + "}");

            function formatCssText(style) {
              var content = style.getPropertyValue("content");
              return style.cssText + " content: " + content + ";";
            }

            function formatCssProperties(style) {
              return util.asArray(style).map(formatProperty).join("; ") + ";";

              function formatProperty(name) {
                return (
                  name +
                  ": " +
                  style.getPropertyValue(name) +
                  (style.getPropertyPriority(name) ? " !important" : "")
                );
              }
            }
          }
        }
      }
      // 处理输入内容
      function copyUserInput() {
      ...
      }
      // 处理svg，创建命名空间
      function fixSvg() {
        if (!(clone instanceof SVGElement)) return;
        clone.setAttribute("xmlns", "<http://www.w3.org/2000/svg>");
        ...
      }
    }
  }

// makeSvgDataUri

  function makeSvgDataUri(node, width, height) {
    return (
      Promise.resolve(node)
        .then(function (node) {
          // 将dom转换为字符串
          node.setAttribute("xmlns", "<http://www.w3.org/1999/xhtml>");
          return new XMLSerializer().serializeToString(node);
        })
        .then(util.escapeXhtml)
        .then(function (xhtml) {
          return (
            '<foreignObject x="0" y="0" width="100%" height="100%">' +
            xhtml +
            "</foreignObject>"
          );
        })
        /**
         * 顺带提一提
         * 不指定xmlns命名空间是不会渲染的
         * xmlns="<http://www.w3.org/2000/svg>"
         */

        .then(function (foreignObject) {
          return (
            '<svg xmlns="<http://www.w3.org/2000/svg>" width="' +
            width +
            '" height="' +
            height +
            '">' +
            foreignObject +
            "</svg>"
          );
        })
        .then(function (svg) {
          return "data:image/svg+xml;charset=utf-8," + svg;
        })
    );
  }
SeriousLose
关注
专栏目录
前端html2canvas和dom-to-image实现截图功能
MoMo@blog
07-28 903
前端截图功能html2canvas和dom-to-image
js 屏幕截图 dom-to-image
weixin_42448623的博客
12-12 1082
dom-to-image github 简单示例 var node = document.body domtoimage.toPng(node).then(function (dataUrl) { var img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch(function (error) { console.error('oops, something went wr
react dom-to-image失真，修改生成后的清晰度
吹口琴的喵喵~~的博客
03-03 1722
前言 最近旧项目发现一个BUG，业务内容是一个弹窗页面的打印功能，因为使用的antd组件库，直接打印dom的话需要修改太多打印样式，所以就想到了把页面转成canvas处理成img元素再用iframe打印。 用的是html2canvas，一切正常。直到上个月开始，客户反应打印后的PDF字体都变小了。 随即用了很多浏览器测试发现真的字体会比原来的小一号，间距变大。 查了资料也没有头绪，不懂为什么，求大神告知是什么原因。 总之既然出问题了，那就先改吧。字号变小那我就在生成canvas之前把页面内容字号变大一号打印
domtoimage.js
07-31
domtoimage图片下载插件,用于将dom节点转换成图片,然后就可以下载下来
dom-to-image 项目教程
最新发布
gitblog_00172的博客
10-11 960
dom-to-image 项目教程 项目地址:https://gitcode.com/gh_mirrors/do/dom-to-image 1. 项目介绍 dom-to-image 是一个基于 JavaScript 的库，它可以将任意的 DOM 节点转换为矢量（SVG）或光栅（PNG 或 JPEG）图像。这个库是基于 Paul Bakaus 的 domvas 项目重新编写的，修复了一些 bug 并...
dom-to-image
weixin_41897680的博客
05-31 1万+
dom-to-image
vue dom-to-image
领悟
09-02 2304
在vue中使用dom-top-image,可截取有滚动条的页面,支持多种格式 使用dom-top-image 获取页面png格式截图,并下载到PC, 安装 npm install dom-to-image 在页面中引用 import domtoimage from 'dom-to-image' 使用方法 获取页面dom, 下载到本地本来是用的是window.saveAs,打包后出现未知错误,导致下载失败,更换下载方法, shotPic () { const that = this
DOM转成img图片(dom-to-image)
qq_45750213的博客
01-16 784
安装并引用方法：print(){
dom-to-image 将vue中未显示的组件转成图片， 并上传
HYeeee的博客
07-19 7259
1、基本使用 npm地址 import domtoimage from 'dom-to-image' export function dom2img(node) { return domtoimage.toPng(node, { cacheBust: true }) .then(function(dataUrl) { var img = new Image(); img.src = dataUrl; document.body.appendChild(img
dom-to-image.js
07-27
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
dom-to-pdf:使用HTML5 canvas和svg从DOM节点生成可打印的分页pdf
04-29
npm install --save dom-to-pdf 用法 var domToPdf = require ( 'dom-to-pdf' ) ; var element = document . getElementById ( 'test' ) ; var options = { filename : 'test.pdf' } ; domToPdf ( element , ...
推荐开源项目：dom-to-image - 将DOM元素转换为图像
gitblog_00086的博客
03-20 1045
推荐开源项目：dom-to-image - 将DOM元素转换为图像 项目地址:https://gitcode.com/gh_mirrors/do/dom-to-image 在网页开发中，我们常常需要将动态生成的内容或布局转化为图片，比如屏幕截图、图表或者是用户设计的页面预览。为此，我想要向大家推荐一个非常实用的JavaScript库：，它能够轻松地将任意DOM元素转换为高质量的JPEG或PNG图像...
前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器
dikuangzha2986的博客
04-17 310
　　之前接到了一个任务，把jsp中的table转成一个图片，保存在指定文件夹并显示在前端。 　　我的思路是：一、引用第三方js在前端把table转成图片 　　　　　　　　二、通过ajax把图片上传到服务器，保存在指定文件夹 　　　　　　　　三、浏览器根据文件名从服务器端获取图片 　　 　　一、引用第三方js在前端把table转成图片 　　一开始我在百度找到了比较多人用过的ht...
用dom-to-image将html生成图片
热门推荐
诸葛苍穹
02-09 4万+
由于业务需要，要将html的表格转成图片下载下来，一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错。 废话不多说，开搞。 第一步：下载必要的js库 ① jquery库（不使用jquery...
前端将dom转换成图片
qq_52839794的博客
02-05 2179
一个能快速且完美的将Dom元素转成各类型图片的轻量化插件dom-to-image推荐，打包完后只有23kb
Dom 元素转换 Image 图片 (截图)
i_Satan的博客
08-08 1092
安装使用案例解释vue2 项目,复制代码即可看见效果stylewidth100%</</</</</</stylebackgroundtomato;datareturnimageUrl""tableDatadatename"王小虎"address"上海市普陀区金沙江路 1518 弄"datename"王小虎"
Web前端之domToImage文档、html标签元素转成图片
CSDN博客主页地址：https://mengjian.blog.csdn.net/
07-26 1026
Web前端之domToImage文档、html标签元素转成图片
dom-to-image使用方法
12-28
dom-to-image是一个用于将DOM元素转换为图像的JavaScript库。以下是dom-to-image的使用方法示例： 1. 首先，确保已经安装了dom-to-image库。可以使用npm进行安装： ```shell npm install dom-to-image ``` 2. 在需要使用dom-to-image的页面中引入dom-to-image库： ```javascript import domtoimage from 'dom-to-image'; ``` 3. 使用domtoimage.toJpeg()方法将DOM元素转换为JPEG格式的图像。该方法接受两个参数：要转换的DOM元素和一个可选的配置对象。例如，将id为"my-node"的DOM元素转换为JPEG图像： ```javascript domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 }) .then(function (dataUrl) { // 在这里可以处理生成的图像数据URL }); ``` 在上述示例中，生成的JPEG图像数据URL将通过.then()方法返回，并可以在回调函数中进行处理。可以将数据URL用作图像的src属性，或者将其下载到计算机上。 请注意，dom-to-image还提供了其他方法，如toPng()、toBlob()等，可以根据需要选择适合的方法进行图像转换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值