Dom-to-image

已于 2022-12-01 13:26:50 修改
阅读量1.3k 收藏 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
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dom-to-image.js
07-27
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
C#使用domtoimage生成图片保存服务器
05-24
C#使用dom-to-image插件截图生成完整图片并保存到服务器上
推荐开源项目：dom-to-image - 将DOM元素转换为图像
最新发布
gitblog_00086的博客
03-20 584
推荐开源项目：dom-to-image - 将DOM元素转换为图像 项目地址:https://gitcode.com/tsayen/dom-to-image 在网页开发中，我们常常需要将动态生成的内容或布局转化为图片，比如屏幕截图、图表或者是用户设计的页面预览。为此，我想要向大家推荐一个非常实用的JavaScript库：dom-to-image，它能够轻松地将任意DOM元素转换为高质量的JPEG或...
dom-to-to-retina视网膜：dom-to-to-retina，但生成高分辨率图像
03-04
dom到图像视网膜 这结合了和 。 用法 import { toPng , toJpeg , toBlob } from "dom-to-image-retina" const dataUrl = await toPng ( el , options ) const dataUrl = await toJpeg ( el , options ) const blob = await toBlob ( el , options ) 执照 麻省理工学院。
dom-to-pdf:使用HTML5 canvas和svg从DOM节点生成可打印的分页pdf
04-29
dom到pdf dom-to-pdf使用HTML5 canvas和svg从DOM节点生成可打印的PDF。 安装 npm install --save dom-to-pdf 用法 var domToPdf = require ( 'dom-to-pdf' ) ; var element = document . getElementById ( 'test' ) ; var options = { filename : 'test.pdf' } ; domToPdf ( element , options , function ( ) { console . log ( 'done' ) ; } ) ; 选项 filename字符串，结果PDF文件的名称，默认名称已generated.pdf .pdf excludeClassNames字符串数组，要从PDF中排除的元素的类名称列
domtoimage.js
07-31
domtoimage图片下载插件,用于将dom节点转换成图片,然后就可以下载下来
dom-to-image
weixin_41897680的博客
05-31 1万+
dom-to-image
vue dom-to-image
领悟
09-02 1994
在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-to-image 将vue中未显示的组件转成图片， 并上传
HYeeee的博客
07-19 6415
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把HTML转成图片并通过ajax上传到服务器
dikuangzha2986的博客
04-17 235
　　之前接到了一个任务，把jsp中的table转成一个图片，保存在指定文件夹并显示在前端。 　　我的思路是：一、引用第三方js在前端把table转成图片 　　　　　　　　二、通过ajax把图片上传到服务器，保存在指定文件夹 　　　　　　　　三、浏览器根据文件名从服务器端获取图片 　　 　　一、引用第三方js在前端把table转成图片 　　一开始我在百度找到了比较多人用过的ht...
用dom-to-image将html生成图片
热门推荐
诸葛苍穹
02-09 3万+
由于业务需要，要将html的表格转成图片下载下来，一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错。 废话不多说，开搞。 第一步：下载必要的js库 ① jquery库（不使用jquery...
dom-to-pdf:为HTML DOM元素提供优化的PDF输出
03-13
DOM到PDF 提供HTML代码段的PDF输出。 图书馆使用 HTML2Canvas，jsPDF和jQuery。 局限性 从画布生成图像时，图像质量降低。
html字体_斗鱼关注人数爬取 | 字体反爬的攻与防
weixin_39704314的博客
11-30 229
作者：CJ Ting原文：https://cjting.me/2020/07/01/douyu-crawler-and-font-anti-crawling/之前因为业务原因需要爬取一批斗鱼主播的相关数据，在这过程中我发现斗鱼使用了一种很有意思的反爬技术，字体反爬。打开任何一个斗鱼主播的直播间，例如 这个主播，他的关注人数数据显示在右上角：斗鱼在关注数据这里使用了字体反爬。什么是字体反爬...
网页编程的学习笔记
傾城如夢的专栏
09-29 4600
网页编程的学习笔记 一、JavaScript 二、ASP 一、JavaScript 0-1基本Html语言 n(1)超链接指定目标网页的Name &lt;Ahref="a1.htm"target="xzy"&gt;连结&lt;/A&gt; 一般情况下超链接打开的目标网页是在本网页之内打开的,但是利用上面的代码可以在新窗口中打开目标网页,再重新打开...
vue前端实现将页面显示内容生成pdf文件的几种方法，html2canvas、dom-to-image、jspdf（带分页）基本使用以及介绍
zhangzuying的博客
03-01 7224
不用多说，vue前端的框架，echarts用来根据数据生成的带有样式效果的图表；html2canvas与dom-to-image都是将界面上的dom生成图片。
2023前端面试题汇总
m0_56232007的博客
03-09 2万+
2023前端基础面试题汇总
DOM-TO-IMAGE将DOM节点转换成图片
u012764444的博客
11-05 6315
① jquery库（看个人需要）： ②dom-to-image.js: https://github.com/tsayen/dom-to-image ③FileSaver.js：https://github.com/eligrey/FileSaver.js &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=
介绍两个关于生成截图图片的js库（2）：dom-to-image
tuzi007a的博客
01-27 2310
dom-to-image简介 简介 git地址：https://github.com/tsayen/dom-to-image 作用： 传给dom-to-image方法一个原生dom， 可以得到一个图片地址， 可以把这个地址放到img标签里，就可以展示出这个图片。 举例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X
dom-to-image iframe
06-06
dom-to-image是一款方便实用的JavaScript工具，可以将一个HTML DOM节点转换成图片格式输出。它的用途很广泛，在网页截图、图像处理、表单预览等方面都有应用场景。其中，iframe是一个独立的HTML页面嵌入在另一个页面中，通常用于网页设计、广告等领域。 如果要使用dom-to-image将一个iframe节点转换成图片，可以先找到iframe中的内容框架，然后调用dom-to-image的convert方法，将内容框架（即iframe内部）作为参数传递给该方法。具体实现方法如下： ``` var iframe = document.getElementById('my-iframe'); //获取iframe节点 var content = iframe.contentDocument; //获取iframe中的内容框架 domtoimage.toPng(content.body) //将获取到的内容框架作为参数传递给toPng方法 .then(function (dataUrl) { var img = new Image(); img.src = dataUrl; //将返回的图片数据URL转换为图片对象 document.body.appendChild(img); //在当前文档中插入图片对象 }) .catch(function (error) { console.error('oops, something went wrong!', error); }); ``` 上述代码将iframe节点的内容框架转换成PNG图片格式，并将其插入到当前页面中。需要注意的是，如果待转换的iframe节点来自不同的域名，可能会因为浏览器的安全策略而遇到跨域问题。此时可以尝试使用postMessage()方法进行通信，或者使用第三方的跨域代理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值