前端使用domtoimage生成截图的详细步骤
作者：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生成截图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！