精华内容
下载资源
问答
  • 原生实现dom生成图片

    2020-08-29 14:44:31
    一、需求背景 最近开发时,有遇到这么一个需求,要...实现方式参考了张鑫旭老师的一篇文章借助SVG forginObject实现DOM图片 ,在此基础上做了一些细节的调整。 这种方式基本的原理,就是将dom转换成xml结构,然后放.

    一、需求背景

    最近开发时,有遇到这么一个需求,要将一个有大量图表/文字/图片的页面导出为pdf(该页面的图表以及文字、图片是可动态配置的),目前主流的方式都是用htmlCanvas插件做的,我们一向的原则是少用插件多用原生,所以最后和产品沟通,导出为图片,因为图片可以用原生实现,并且默认单页,效果也非常好。

    二、实现方式

    实现方式参考了张鑫旭老师的一篇文章 借助SVG forginObject实现DOM转图片 ,在此基础上做了一些细节的调整。

    这种方式基本的原理,就是将dom转换成xml结构,然后放在<forginObject>标签内,借助svg的处理能力将dom结构转换成svg标签,然后将svg标签作为图片的base64地址,最后用a标签实现下载。整个过程无需插件或者服务器支持,纯原生,浏览器兼容性也很好,生成速度,按照我的经验,2S内可以完成,可以说算还行的吧。下面贴一下具体的代码以及一些要注意的细节

    特别提示:dom内的svg标签无需单独处理

    三、实现细节

    封装一个函数用于实现dom转图片

    function getImgByDom(params) {
      const { target } = params;
      //克隆一份dom节点
      const cloneDom = target.cloneNode(true);
      cloneDom.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
      const width = target.offsetWidth;
      const height = target.offsetHeight;
      //转成base64位地址
      const xmlContent = (xmlContent = `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"
      width="${width}" height="${height}"><foreignObject x="0" y="0" width="100%" height="100%">
      ${new XMLSerializer().serializeToString(cloneDom)}
        </foreignObject></svg>`);
      //处理部分特殊字符
      return xmlContent.replace(/\n/g, "").replace(/\t/g, "").replace(/#/g, "%23");
    }

    下面是一些实现的细节

    1.处理img元素

    上面的方法只能处理普通的标签,img标签通常情况下地址不是base64的,所以我们要先把img标签的地址转换成base64,在这里我们可以借助canvas实现。

    封装一个方法获取图片的base64地址

    /**
     *获取img元素的bse64地址
     * @param {HTMLElement} imgEle img元素
     */
    function getBse64ByImg(imgEle) {
      const canvas = window.document.createElement("canvas");
      canvas.width = imgEle.width;
      canvas.height = imgEle.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(imgEle, 0, 0);
      return canvas.toDataURL();
    }

    在主函数中加入相关的处理逻辑。为了方便,我们可以将图片的选择器作为参数传入函数

    /**
     * 处理img元素
     * @param {string} imgSelector img元素的选择器
     * @param {HTMLElement} target 源dom
     * @param {HTMLElement} cloneDom clone出来的dom
     */
    function handleImgDom(imgSelector, target, cloneDom) {
      if (!imgSelector) return;
      const imgList = cloneDom.querySelectorAll(imgSelector);
      const realImgList = target.querySelectorAll(imgSelector);
      for (let i = 0, l = imgList.length; i < l; i++) {
        imgList[i].src = getBse64ByImg(realImgList[i]);
      }
    }
    
    
    在主函数中加入这一行就行
      //处理图片
      handleImgDom(imgSelector, target, cloneDom);

    2.处理canvas元素

    canvas元素和img元素类似,直接转成xml是无法显示的,所以先将canvas转成base64的图片地址,然后将canvas元素整个替换为img元素

    /**
     *  处理canvas元素
     * @param {string} canvasSelector 注意:这里的canvasSelector是canvas元素父元素的选择器
     * @param {HTMLElement} target 源dom
     * @param {HTMLElement} cloneDom clone出来的dom
     */
    function handleCanvasDom(canvasSelector, target, cloneDom) {
      if (!canvasSelector) return;
      const canvasBoxList = target.querySelectorAll(canvasSelector);
      const cloneCanvasBoxList = cloneDom.querySelectorAll(canvasSelector);
      for (let i = 0, l = canvasBoxList.length; i < l; i++) {
        const currentCanvas = canvasBoxList[i].querySelector("canvas");
        const src = currentCanvas.toDataURL();
    
        //这里用style.width而不是width是因为canvas实际占据的宽高是style里面的属性,坐标计算才是本身的属性
        const width = Number.parseInt(currentCanvas.style.width);
        const height = Number.parseInt(currentCanvas.style.height);
        cloneCanvasBoxList[
          i
        ].innerHTML = `<img alt="" src="${src}" width="${width}" height="${height}" />`;
      }
    }
    
    
    在主函数中加入处理逻辑
      //处理canvas
      handleCanvasDom(canvasSelector, target, cloneDom);

    3.样式处理

    张鑫旭老师的文章里,样式是用document.querySelector('style').outerHTML获取,然后直接加入到xml里面,但是这样是有问题的,因为单个页面的样式,无需引入全局所有的样式文件,且vue里面的css/less/scss模块加了scoped属性之后,这么写样式也不生效,所以我个人的建议是,需要导出为图片的dom元素内,dom样式用行内书写,一些用类名实现的公共样式,将这些样式作为字符串单独加入进来

      const { target, imgSelector, canvasSelector, styleStr } = params;
    
      //转成base64位地址
      const xmlContent = (xmlContent = `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"
      width="${width}" height="${height}"><foreignObject x="0" y="0" width="100%" height="100%">
      ${new XMLSerializer().serializeToString(cloneDom)}${styleStr}
        </foreignObject></svg>`);

    4.动态交互或者需要隐藏的元素

    原dom上一些元素可能是hover或者其他情况下才显示,或者一些元素在显示器上显示但不能放到图片里,可以将这些元素的display值设为none

    /**
     *处理要隐藏的元素
     * @param {string} filterSelector 需要隐藏的元素的选择器
     * @param {HTMLElement} cloneDom clone出来的dom
     */
    function handleFilterDom(filterSelector, cloneDom) {
      if (!filterSelector) return;
      const filterDomList = cloneDom.querySelectorAll(filterSelector);
      [...filterDomList].forEach((item) => (item.style.display = "none"));
    }
    

    5.其他

    有时,需要对元素做一些特殊处理,比如放大、缩小,修改样式等等,传入对应的处理函,在主函数中处理

    /**
     *
     *对节点的特殊处理
     * @param {Function} specialHandle 处理函数
     * @param {HTMLElement} cloneDom clone出来的dom
     */
    function handleCloneDom(specialHandle, cloneDom) {
      if (!specialHandle) return;
      specialHandle(cloneDom);
    }
    

    四、最终代码

    最后,完整版代码,包括下载,如下:

    /**
     *将donm转换成图片并下载到本地
     *
     * @param {HTMLElement} target
     * @param {string} name
     */
    function downloadDomToImg(target, name) {
      const src = getImgByDom({ target });
      const aEle = window.document.createElement("a");
      aEle.style.display = "none";
      aEle.download = name;
      const img = new Image();
      img.src = src;
      img.onload = () => {
        aEle.href = src;
        window.document.body.appendChild(aEle);
        aEle.click();
        window.document.body.removeChild(aEle);
      };
    }
    
    /**
     *获取dom对应图片的base64地址
     *
     * @param {Object} params
     * @returns 图片的base64地址
     */
    function getImgByDom(params) {
      const {
        target,
        filterSelector,
        imgSelector,
        canvasSelector,
        styleStr,
        specialHandle,
      } = params;
      //克隆一份dom节点
      const cloneDom = target.cloneNode(true);
      cloneDom.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
      const width = target.offsetWidth;
      const height = target.offsetHeight;
    
      //处理要隐藏的元素
      handleFilterDom(filterSelector, cloneDom);
    
      //处理图片
      handleImgDom(imgSelector, target, cloneDom);
    
      //处理canvas
      handleCanvasDom(canvasSelector, target, cloneDom);
    
      //其他处理
      handleCloneDom(specialHandle, cloneDom);
    
      //转成base64位地址
      const xmlContent = (xmlContent = `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"
      width="${width}" height="${height}"><foreignObject x="0" y="0" width="100%" height="100%">
      ${new XMLSerializer().serializeToString(cloneDom)}${styleStr}
        </foreignObject></svg>`);
    
      //处理部分特殊字符
      return xmlContent.replace(/\n/g, "").replace(/\t/g, "").replace(/#/g, "%23");
    }
    
    /**
     * 处理img元素
     * @param {string} imgSelector img元素的选择器
     * @param {HTMLElement} target 源dom
     * @param {HTMLElement} cloneDom clone出来的dom
     */
    function handleImgDom(imgSelector, target, cloneDom) {
      if (!imgSelector) return;
      const imgList = cloneDom.querySelectorAll(imgSelector);
      const realImgList = target.querySelectorAll(imgSelector);
      for (let i = 0, l = imgList.length; i < l; i++) {
        imgList[i].src = getBse64ByImg(realImgList[i]);
      }
    }
    
    /**
     *获取img元素的bse64地址
     * @param {HTMLElement} imgEle img元素
     */
    function getBse64ByImg(imgEle) {
      const canvas = window.document.createElement("canvas");
      canvas.width = imgEle.width;
      canvas.height = imgEle.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(imgEle, 0, 0);
      return canvas.toDataURL();
    }
    
    /**
     *  处理canvas元素
     * @param {string} canvasSelector 注意:这里的canvasSelector是canvas元素父元素的选择器
     * @param {HTMLElement} target 源dom
     * @param {HTMLElement} cloneDom clone出来的dom
     */
    function handleCanvasDom(canvasSelector, target, cloneDom) {
      if (!canvasSelector) return;
      const canvasBoxList = target.querySelectorAll(canvasSelector);
      const cloneCanvasBoxList = cloneDom.querySelectorAll(canvasSelector);
      for (let i = 0, l = canvasBoxList.length; i < l; i++) {
        const currentCanvas = canvasBoxList[i].querySelector("canvas");
        const src = currentCanvas.toDataURL();
    
        //这里用style.width而不是width是因为canvas实际占据的宽高是style里面的属性,坐标计算才是本身的属性
        const width = Number.parseInt(currentCanvas.style.width);
        const height = Number.parseInt(currentCanvas.style.height);
        cloneCanvasBoxList[
          i
        ].innerHTML = `<img alt="" src="${src}" width="${width}" height="${height}" />`;
      }
    }
    
    /**
     *处理要隐藏的元素
     * @param {string} filterSelector 需要隐藏的元素的选择器
     * @param {HTMLElement} cloneDom clone出来的dom
     */
    function handleFilterDom(filterSelector, cloneDom) {
      if (!filterSelector) return;
      const filterDomList = cloneDom.querySelectorAll(filterSelector);
      [...filterDomList].forEach((item) => (item.style.display = "none"));
    }
    
    /**
     *
     *对节点的特殊处理
     * @param {Function} specialHandle 处理函数
     * @param {HTMLElement} cloneDom clone出来的dom
     */
    function handleCloneDom(specialHandle, cloneDom) {
      if (!specialHandle) return;
      specialHandle(cloneDom);
    }
    

     

    展开全文
  • 使用html2canvas实现图片截图并保存至本地或在页面中以canvas的方式渲染
  • dom生成canvas并转为图片,生成canvas时,会有一些css样式不被识别,就是说,你用css绘制时是成功的,但是在生成canvas时,样式会丢失。         如上图所示,红框内的样式,一开始是用这种方式实现的 ...

    将dom生成canvas并转为图片,生成canvas时,会有一些css样式不被识别,就是说,你用css绘制时是成功的,但是在生成canvas时,样式会丢失。

     

     

     

     

    如上图所示,红框内的样式,一开始是用这种方式实现的

    <div class="user_info">
        <div class="user_hearder">
            <img class="width100 block" v-bind:src="user.portrait">
        </div>
        <div class="user_nick_name"> <span>{{user.nick_name}} </span> <span>向你推荐</span> </div>
    </div>
    .user_info{
        position: absolute;
        top: 20px;
        left: 20px;
        display: flex;
        align-items: center;
    }
    .user_hearder{
        z-index:13;
    }
    .user_hearder img{
        box-sizing: border-box;
        width: 40px;
        border: 3px solid #ffffff;
        border-radius: 50px;
    }
    .user_nick_name{
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        line-height: 35px;
        background-color: rgba(0,0,0,0.3);
        border-radius: 0px 25px 25px 0px;
        margin-left: -15px;
        padding-left: 30px;
        padding-right: 15px;
    }

    这样的话样式上是没有问题的,右边的半透明正好被左边的头像覆盖住一部分,但是在生成canvas时就出现了问题。canvas生成插件html2canvas.js根本不识别z-index样式,出现了右边的半透明盖在了头像上面,导致样式错乱。

    然后就改成了下面的样式布局

    <div class="user_info">
        <div class="user_nick_name">
            <span>{{user.nick_name}} </span>
            <span>向你推荐</span>
        </div>
        <div class="user_hearder">
            <img class="width100 block" v-bind:src="user.portrait">
        </div>
    </div>
    .user_info{
        position: absolute;
        top: 20px;
        left: 20px;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }
    .user_hearder{
    }
    .user_hearder img{
        box-sizing: border-box;
        width: 40px;
        border: 3px solid #ffffff;
        border-radius: 50px;
    }
    .user_nick_name{
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        line-height: 35px;
        background-color: rgba(0,0,0,0.3);
        border-radius: 0px 25px 25px 0px;
        margin-left: -15px;
        padding-left: 30px;
        padding-right: 15px;
    }

    这样,布局上,头像写在“***向您推荐”后面,然后运用盒模型,flex-direction: row-reverse;样式改变主轴的方向(即项目的排列方向),这样生成的canvas就是正确的了。

    展开全文
  • C#使用dom-to-image插件截图生成完整图片并保存到服务器上
  • javascript裁剪页面(选择DOM)生成图片

    千次阅读 2018-10-06 17:00:48
    想做一个裁剪网页的部分内容,生成图片的功能模块;才开始打算的使用PHP实现,结果发现,并不太好实现,当然有可能是我的水平的原因。但最后,在网上查了下,发现居然可以用JS实现,简直是意外惊喜呀~~!!其主要是...

    想做一个裁剪网页的部分内容,生成图片的功能模块;才开始打算的使用PHP实现,结果发现,并不太好实现,当然有可能是我的水平的原因。但最后,在网上查了下,发现居然可以用JS实现,简直是意外惊喜呀~~!!其主要是通过html2canvas.js实现网页截图功能。

     

    具体使用:

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> 
    
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    
    <script type="text/javascript">
    
    (function(){
    
    var wechatWrap = document.getElementsByClassName('wechatWrap')[0];
    
    var creatPrintImg = document.getElementsByClassName('creatPrintImg')[0];
    
    
    
    creatPrintImg.onclick = function()
    {
    
        html2canvas(wechatWrap,{
    
            onrendered : function(canvas){
    
    
            var url = canvas.toDataURL();
    
                var str = 'red_grape'+ Math.ceil(Math.random()*10000);
    
                 //以下代码为下载此图片功能
    
                var triggerDownload = $("<a>").attr("href", url).attr("download", str+"_hm.png").appendTo("body");
    
                  triggerDownload[0].click();
    
                  triggerDownload.remove();
    
            }
    
        });
    
    }
    
    
    
    })();
    
    </script>

     

    该code主要展示的就是,通过点击按钮生成对用DOM元素的图片~~!

    展开全文
  • dom-to-image生成图片并下载

    千次阅读 2020-04-22 17:40:40
    下载必要的js库npm install dom-to-image 引用库import domtoimage ...①生成png的图片插入的到当前页面 var node = document.getElementById('my-node'); domtoimage.toPng(node) .then(function (dataUrl) { ...
    1. 下载必要的js库npm install dom-to-image
    2. 引用库import domtoimage from ‘dom-to-image’;
      ①生成png的图片插入的到当前页面
    var node = document.getElementById('my-node');
    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 wrong!', error);
        });
    

    ②生成图片并下载png格式

    domtoimage.toBlob(document.getElementById('my-node'))
      .then(function (blob) {
           window.saveAs(blob, 'my-node.png');
       });
    

    ③生成图片并下载jpeg格式

    domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
        .then(function (dataUrl) {
            var link = document.createElement('a');
            link.download = 'my-image-name.jpeg';
            link.href = dataUrl;
            link.click();
        });
                            
    

    ④还两种生成SVG和pixel data的

    domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
        .then(function (dataUrl) {
            /* do something */
        });
     var node = document.getElementById('my-node');
    domtoimage.toPixelData(node)
        .then(function (pixels) {
            for (var y = 0; y < node.scrollHeight; ++y) {
              for (var x = 0; x < node.scrollWidth; ++x) {
                pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
                /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
                pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
              }
            }
        });
    

    完整的Demo:

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="dom-to-image.js"></script>
    <script type="text/javascript" src="FileSaver.js"></script>
    
      <script type="text/javascript">
      $(function(){
          //
          $("#btn").click(function(){
          // 插入图片到html
          // var node = document.getElementById('table');
          //     domtoimage.toPng(node)
          //               .then(function (dataUrl) {
          //                   var img = new Image();
          //                   img.src = dataUrl;
          //                   document.body.appendChild(img);
          //               });
                         
                        
          // 下载png图片
           domtoimage.toBlob(document.getElementById('table'))
              .then(function (blob) {
                  window.saveAs(blob, 'my-node.png');
              });
         
    
          // 下载jpeg图片
          // domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
          //           .then(function (dataUrl) {
          //               var link = document.createElement('a');
          //               link.download = 'my-image-name.jpeg';
          //               link.href = dataUrl;
          //               link.click();
          //           });  
    
          // var node = document.getElementById('table');
          // domtoimage.toPixelData(node)
          //     .then(function (pixels) {
          //         for (var y = 0; y < node.scrollHeight; ++y) {
          //           for (var x = 0; x < node.scrollWidth; ++x) {
          //             pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
          //             /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
          //             pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
          //           }
          //         }
          //     });    
      })
      </script>
    </head>
    <body>
      <input type="button" id="btn" value="do it" />
      <h4>两行三列:</h4>
      <table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black;">
          <tr style="background:green;">
            <td rowspan="3">200</td>
            <td>200</td>
            <td>300</td>
          </tr>
          <tr style="background:green;">
            <td rowspan="2">500</td>
            <td>600</td>
          </tr>
          <tr style="background:green;">
            <td>600</td>
          </tr>
          <tr style="background:skyblue;">
            <td rowspan="3">100</td>
            <td>200</td>
            <td>300</td>
          </tr>
          <tr style="background:skyblue;">
            <td>500</td>
            <td>600</td>
          </tr>
          <tr style="background:skyblue;">
            <td>600</td>
            <td>600</td>
          </tr>
      </table>
    </body>
    </html>
    
    展开全文
  • 在使用插件过程中,domtoimage插件生成图片会模糊失真,经过n久找到了方法,过了N久的今天有同事问我怎么解决的,想了半天才想起来怎么解决,为了方便自己也方便大家,这里记录一下 在domtoimage插件包中找到src...
  • dom-to-Image生成图片并打印

    千次阅读 2019-05-10 11:47:06
    将页面内容生成图片并打印出来 一、导入相对应的js代码块:如下 <script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script> <script src=...
  • http://html2canvas.hertzen.com/
  • uniapp 使用html2canvas将指定dom内容写入Canvas生成图片并下载 注: 1、下载图片但是只支持app 2、可以切换背景图 <template> <view class="createIDcard"> <view class="contid"> <view ...
  • dom-to-image将html生成图片

    万次阅读 热门讨论 2018-02-09 23:12:33
    功能是可以实现,但是有缺陷(表格存在合并的单元格时,生成图片表格线框不完整),后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错。 废话不多说,开搞。 第一步:下载必要的js库 ① jquery库(不...
  • 将页面转为图片并附带二维码,在pc端时候,QRCode与domtoimage并不会出现问题,但我将代码提交服务器,并用手机微信查看的时候,发现在微信公众号中domtoimage插件生成失败了。 解决思路与办法就是先使用QRcode生成...
  • UNI-APP 生成海报 页面部分 <template> <view class='page'> <input type="text" value="" class="input" v-model="text" placeholder="请输入需要...生成图片</button> <canvas canvas-
  • dom-to-image:使用HTML5 canvas从DOM节点生成图像
  • 需求:将页面中DIV内容块(包含svg流程节点)生成图片并直接下载到用户本地,并且不影响之前的svg图使用 实现: 1、安装依赖 cnpm install --save html2canvas cnpm install --save canvg@2.0.0-beta.1 canvas...
  • 生成Dom树、解析css样式、js交互 二、页面渲染机制 三、DOM 1.什么是 DOM 2.DOM 树如何生成 HTML 解析器 3.JavaScript 是如何影响 DOM 生成的 内嵌JavaScript 引入 JavaScript 文件 引入css文件
  • 一样的代码,在chrome下是1s,在IE下就是10秒,烦请各位大佬帮我解答一下</p>
  • 我htm2cnvas因为不支持transfom元素的合成,我换成了dom-to-image,这个插件在ios上合成好了,看着对的,但长按保存为图片和合成出来的图不一致,缺东西,有大佬知道是什么原因吗,还有更好的办法吗?
  • html生成图片 方法一、html2canvas 实用html2canvas插件,生成图片,弊端:不兼容一些css3属性 方法二、domtoimage 弊端: 1、web生成图片下载到本地。 2、dom中不能有跨域图片。 ...
  • 主要介绍了PHP基于DOMDocument解析和生成xml的方法,结合具体实例形式分析了php使用DOMDocument解析xml节点及xml文件生成的各种常用操作技巧,需要的朋友可以参考下
  • DOM

    千次阅读 多人点赞 2019-11-21 20:46:11
    什么是DOM 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。 W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。...
  • 用SVG实现DOM图片

    2020-04-11 14:04:59
    遇到个 需要生成定义海报的功能,觉得有趣就自己写个简单的练习。个人水平有限写的不好勿喷哈哈 原理是 用svg的 foreignObject 标签 定义结构 然后 canvas 把svg画出来。下面上代码 ···············...
  • 使用HTML5 canvas和svg从DOM节点生成可打印的分页pdf
  • 之前使用html2canvas转成图片会...最近找到一个新的插件domtoimage,可以完美解决之前的问题,这个只需要引入js,然后调用即可生成图片. domtoimage.toPng(document.getElementById('repair')) .then(function ...
  • 生成图片下载图片的插件: html2canvas.js dom-to-image.js(推荐使用) puppeteer.js rasterizehtml.js

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,207
精华内容 23,282
关键字:

dom生成图片