javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端domtoimage生成截图

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

作者：Lucky_Dog_c

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

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

	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生成截图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文