前端使用domtoimage生成截图的详细步骤

更新时间：2024年09月28日 08:56:05 作者：Lucky_Dog_c

前端生成截图技术多样,html2canvas虽详细但耗时且阻塞操作,而domtoimage使用流畅,支持多种图片格式转换,如png、jpg、svg等,并可获取原始像素值,文中通过代码介绍的非常详细,需要的朋友可以参考下

前端生成截图有多种方式：

使用html2canvas，在之前文章中已有具体介绍（使用html2canvas生成截图）这个插件在生成截图的时候有一些弊端，在canvas绘制时耗时长，且绘制时屏幕会阻塞无法操作
使用domtoimage（官方文档）这个插件在使用时会相对丝滑很多，一下简单介绍使用方法（具体可结合使用html2canvas生成截图食用）

	npm install dom-to-image //下载插件
	
	import domtoimage from 'dom-to-image'; //引入

    const screenImage = (screen) => { //screen为要下载的dom元素
      return new Promise((resolve, reject) => {
        const formData = new FormData()
        domtoimage.toBlob(screen, {  //直接转化为二进制格式，可以直接将图片下载
          style: {
            backgroundColor: '#17496D' //给它一个背景色
          }
        })
          .then(function(blob) {
            formData.append('image', blob, 'image.png')
            resolve(formData)
          })
          .catch(function(error) {
            console.error('截图生成失败', error)
          })
      })
    }

domtoimage方法

domtoimage.toPng(…);将节点转化为png格式的图片 domtoimage.toJpeg(…);将节点转化为jpg格式的图片
domtoimage.toSvg(…);将节点转化为svg格式的图片，生成的图片的格式都是base64格式
domtoimage.toBlob(…);将节点转化为二进制格式，这个可以直接将图片下载
domtoimage.toPixelData(…);获取原始像素值，以Uint8Array
数组的形式返回，每4个数组元素表示一个像素点，即rgba值。这个方法也是挺实用的，可以用于WebGL中编写着色器颜色。

domtoimage属性

filter ：过滤器节点中默写不需要的节点；
bgcolor ：图片背景颜色；
height, width ：图片宽高；
style：传入节点的样式，可以是任何有效的样式；
quality ：图片的质量，也就是清晰度；一个介于 0 和 1 之间的数字，表示 JPEG图像的图像质量（例如 0.92 => 92%）。默认为 1.0 (100%)
cacheBust ：将时间戳加入到图片的url中，相当于添加新的图片；
imagePlaceholder ：图片生成失败时，在图片上面的提示，相当于img标签的alt；

附：dom-to-image实现的网页截图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>echarts 测试</title>
		
        <script type="text/javascript" src="dom-to-image.js"></script>
    </head>
    <body style="position:relative;">
     <div style="width:100px;height:100px;background-color:#000;color:white;">
         尾气请问气味哦平均气温哦啤酒去i
     </div>
     <div style="width:100px;height:100px;background-color:#ccc;"></div>
     <div style="width:100px;height:100px;background-color:#666;color:#ccc;">
         请我陪考去请问哦
     </div>
     <div style="width:100px;height:100px;background-color:#000;color:white;">
            尾气请问气味哦平均气温哦啤酒去i
        </div>
        <div style="width:100px;height:100px;background-color:#ccc;"></div>
 
        <div style="width:100px;height:100px;background-color:#000;color:white;">
                尾气请问气味哦平均气温哦啤酒去i
            </div>
            <div style="width:100px;height:100px;background-color:#ccc;"></div>
            <div style="width:100px;height:100px;background-color:#ddd;"></div>
            <div style="width:900px;height:100px;background-color:#666;">
                桥文件额期望寄哦IQ叫我我就群殴我为奇偶去叫哦我IQ寄哦 
            </div>
     <div οnclick="jt()">点击截图</div>
     <script>
         var pointInfo= {};
        document.οnmοusedοwn=function(e){
            if(!pointInfo.bool)return;
            pointInfo.startInfo={
                x:e.clientX+window.scrollX,
                y:e.clientY+window.scrollY
            };
            pointInfo.eleArr[1].style.left=e.clientX+window.scrollX+"px";
            pointInfo.eleArr[1].style.top=e.clientY+window.scrollY+"px";
        }
         
        document.οnmοusemοve=function(e){
            if(!pointInfo.bool)return;
            if(!pointInfo.startInfo)return;
            pointInfo.eleArr[1].style.width=e.clientX-pointInfo.startInfo.x+window.scrollX+"px";
            pointInfo.eleArr[1].style.height=e.clientY-pointInfo.startInfo.y+window.scrollY+"px";
        }
        
        document.οnmοuseup=function(e){
            if(!pointInfo.bool)return;
            if(!pointInfo.startInfo)return;
            pointInfo.bool=false;
            var c = document.createElement("canvas");
            node=document.body;
            document.body.removeChild( pointInfo.eleArr[0]);
            var promise = domtoimage.toPng(node);
            promise.then(function(v){
                var img =new Image();
                img.src=v;
                c.width=parseInt(pointInfo.eleArr[1].style.width);
                c.height=parseInt(pointInfo.eleArr[1].style.height);
                var ctx = c.getContext("2d");
                img.οnlοad=function(){
                    ctx.drawImage(img,pointInfo.startInfo.x,pointInfo.startInfo.y,c.width,c.height,0,0,c.width,c.height);
                    var imgS=document.createElement("img");
                    imgS.src=c.toDataURL();
                    document.body.appendChild(imgS);
                    pointInfo.startInfo=null;
                }
              
            });
        }
        function jt(){
            var d= document.createElement("div");
            var d2=document.createElement("div");
        
            d.style.cssText="width:100%;height:100%;background-color:rgba(0,0,0,0.2);position:absolute;top:0;left:0;";
            d2.style.cssText="position:absolute;background:rgba(255,255,255,0.2);";
            pointInfo.eleArr= [d,d2];
            pointInfo.bool=true;
            d.appendChild(d2);
            document.body.appendChild(d);
        }
     </script>
    </body>
</html>

总结

到此这篇关于前端使用domtoimage生成截图的文章就介绍到这了,更多相关前端domtoimage生成截图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

BootstrapValidator不触发校验的实现代码
BootstrapValidator是基于bootstrap3的jquery表单验证插件，是最适合bootstrap框架的表单验证插件，本文给大家介绍BootstrapValidator不触发校验的实现代码，感兴趣的朋友一起看看吧
2016-09-09
JAVASCRIPT 客户端验证数据的合法性代码(正则)
JAVASCRIPT 客户端验证数据的合法性代码,比较全了，所以简单分页了下，喜欢的朋友可以收藏下。
2010-04-04
动态加载script文件的两种方法
第一种就是利用ajax方式，第二种是，动态创建一个script标签，设置其src属性，通过把script标签插入到页面head来加载js，感兴趣的朋友可以了解下
2013-08-08
JavaScript闭包与作用域链实例分析
这篇文章主要介绍了JavaScript闭包与作用域链,结合实例形式分析了javascript闭包的具体概念、功能、并对比作用域链分析了闭包的相关使用技巧与注意事项,需要的朋友可以参考下
2019-01-01
JavaScript中内存泄漏的介绍与教程（推荐）
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。下面这篇文章主要给的大家介绍了关于JavaScript中内存泄漏的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
Jquery 常用方法一览表(集合)
之前脚本之家发过相关的文章，这里又是一篇关于jquery常用方法的收集整理，我们给放到一起，学习jquery的朋友可以参考下。
2010-03-03
BootStrap tab选项卡使用小结
这篇文章主要为大家详细介绍了BootStrap tab选项卡使用小结，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
js前端登录加密解决方案
项目中需要前端书写登录页面，用户输入账号密码，本文主要介绍了js前端登录加密解决方案，具有一定的参考价值，感兴趣的可以了解一下
2024-02-02
json的结构与遍历方法实例分析
这篇文章主要介绍了json的结构与遍历方法,结合具体实例形式分析了json常见的简单与复杂结构表示方法,以及具体的遍历操作实现技巧,需要的朋友可以参考下
2017-04-04
分析JavaScript数组操作难点
本篇文章通过例举代码分析的方式给大家讲解了JavaScript数组操作难点以及需要注意的地方，一起学习参考下吧。
2017-12-12