前言
大家好，这是我工作中遇到的一个需求，鼠标移上某个标签元素的时候需要截取标签元素，生成图片，下面是自己写的一个代码示例，样式比较简陋，希望大家不要介意哈
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="mask"></div>
<div class="main">
<div class="box" style="background-color: red;">盒子</div>
<div class="box" style="background-color: blue;">盒子</div>
<div class="box" style="background-color: yellow;">盒子</div>
<div class="box" style="background-color: pink;">盒子</div>
<div class="box">
<div style="width: 50px;height:50px;background-color: aqua;"></div>
</div>
<span>文本</span>
</div>
<div class="screenshots" id="screenshots">
<button id="btn" class="btn">截图</button>
</div>
</body>
</html>
js代码
<script>
function addFn(e){
e.target.classList.add('on-mouseover')
}
function removeFn(e){
e.target.classList.remove('on-mouseover')
}
function screenshotsFn(e){
e.target.classList.remove('on-mouseover')
let arr = ['mask','screenshots','btn'];
if(!arr.includes(e.target.className)){
takeshot(e.target)//生成画布图片
};
document.querySelector('#btn').removeEventListener('click',function(){},true)//销毁事件
window.removeEventListener('mouseover',addFn,false)//销毁事件
window.removeEventListener('mouseout',removeFn,false)//销毁事件
window.removeEventListener('click',screenshotsFn,true)//销毁事件
document.querySelector('#mask').classList.remove('mask')//移除蒙版
}
document.querySelector('#btn').addEventListener('click',function(){//点击截图
document.querySelector('#mask').classList.add('mask')//添加蒙版
window.addEventListener('mouseover',addFn,false)
window.addEventListener('mouseout',removeFn,false)
window.addEventListener('click',screenshotsFn,true)
},false)
function generateImages(canvas){//canvas生成图片
let image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function takeshot(element) {
html2canvas(element).then(
function (canvas) {
document.getElementById('screenshots').appendChild(canvas);//画布写入div中
generateImages(canvas)//生成图片
}
)
}
</script>
样式代码
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
}
.main{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.box{
width: 100px;
height:100px;
line-height: 100px;
text-align: center;
margin-right: 40px;
}
.on-mouseover{
position: relative;
background-color: #fff !important;
z-index: 999;
}
.mask{
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
background-color:black;filter:Alpha(Opacity=60);opacity:0.6;
pointer-events: none;
}
.screenshots{
position: fixed;
z-index: 999;
right: 2px;
bottom: 2px;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
结语
如果你觉得此文对你有一丁点帮助，麻烦点个赞哈，谢谢大家。
