这个是完整的HTML页面截屏。截屏主要用到html2canvas这个js库。
本文章涉及3个小功能：1.用qrcode生成带logo二维码。2.头像上传功能。3html页面截屏功能。
效果如下：左边是源图样式，右边是截图效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src='./js/qrcode.js'></script>
<!--qrcode.js的下载地址： -->
<script src='./js/utf.js'></script>
<!-- utf.js的下载地址： -->
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<title>截图完善</title>
<style>
/* html{ //清明节灰色纪念设置。全局灰。
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
/* filter: grayscale(100%); */
/* filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
} */
html, body{
padding:0;
margin:0;
}
.head{
width:30%;
height:0;
padding-bottom:30%;
/* border:1px solid blue; */
margin:auto;
border-radius: 50%;
position:relative;
}
#img{
position:absolute;
border-radius: 50%;
border:1px solid gray;
left:0;
top:0;
width:100%;
height:100%;
/* z-index:-1; */
}
.icon{
position:absolute;
left:50%;
top:50%;
width:100%;
transform: translate(-50%,-50%);
text-align:center;
}
#btn{
margin:0 auto;
margin-top:10px;
display:block;
border:1px solid blue;
border-radius:5px;
}
#btn2{
margin:0 auto;
margin-top:10px;
display:block;
border:1px solid blue;
border-radius:5px;
}
</style>
</head>
<body>
<div id='box'>
<div >
<div class='head'>
<img id='img' src="" width='100%' alt="">
<div class='icon'>头像</div>
</div>
<input type="file" value='上传文件' id='file' style='display:none' οnchange='upload(files)'>
<button id='btn'>切换头像</button>
</div>
<div><p style='text-indent: 2ch;'>eval（) 使用与调用者相同的权限执行代码。如果你用 eval（) 运行的字符串代码被恶意方（不怀好意的人）修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个 eval（) 被调用时的作用域，这也有可能导致一些不同方式的攻击。
</p>
</div>
<!-- 放二维码 -->
<div id="qrcodeCanvas">
</div>
<button id='btn2'>截屏</button>
</div>
<img class='qq' src="" alt="">
<script>
//点击切换头像
$('#btn').click(()=>{
$('#file').click()
})
var dataUrl;
//点击截屏
$('#btn2').click(()=>{
$('#btn2').css('display','none')
console.log('开始截屏');
var canvasObj=document.createElement('canvas');
_canvas = document.getElementById('box');
// var w = parseInt(window.getComputedStyle(_canvas).width);
// var h = parseInt(window.getComputedStyle(_canvas).height);
var w=parseInt( $('#box').css('width'));//也可以获取宽度。其内部方式应该也是offsetWidth方式获取的。,但是得到的是字符串带px单位，不是数字。
var h=parseInt($('#box').css('height'));
console.log(w,h,'打印宽高')
canvasObj.width=w*5;//设置canvas画板的宽度，放大会变清晰。
canvasObj.height=h*5;//设置canvas高度
canvasObj.style.width=w;
canvasObj.style.height=h;
var ctx=canvasObj.getContext('2d')//获取画板内容
ctx.scale(5,5) //因为画板变大了，所以绘图内容也同步变大，这样图片保证不变形，又清晰。代价是生成的base64字符串数据变大。
html2canvas(document.getElementById('box'), { canvas: canvasObj }).then(function(canvas) {
canvas.toDataURL("image/png");
console.log(canvas.toDataURL("image/png").length);
$('.qq').attr({'src':canvas.toDataURL("image/png"),'width':'100%'});
$('#btn2').css('display','block')
})
})
//触发隐藏的input上传文件筐
function upload(files){
//console.log(files[0]);
var reader=new FileReader();
reader.readAsDataURL(files[0]);
reader.οnlοad=function(){
console.log('运行')
$('#img').attr('src',reader.result);
$('#img').css('border','none')
$('.icon').css('display','none');
dataUrl=reader.result;//将图片转变成base64字符串存储到dataUrl变量。后续可以将这个字符串发送到后端。
refresh()
}
}
//页面登录时，不管有没有头像，先生成一个二维码出来。
refresh()
//刷新生成二维码
function refresh(){
document.getElementById("qrcodeCanvas").innerHTML=""; //下面这行代码也可以。
// $('#qrcodeCanvas').html("")
$("#qrcodeCanvas").qrcode({
//render : "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
text : 'http://www.baidu.com',//"这是修改了官文的js文件，此时生成的二维码支持中文和LOGO", //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
width : "100", //二维码的宽度
height : "100", //二维码的高度
background : "#ffffff", //二维码的后景色
foreground : "#000000", //二维码的前景色
src: dataUrl //二维码中间的图片
});
}
// console.log(decodeURI('bbb%E4%BD%A0%E5%A5%BD'),encodeURI('你好'))//encode
console.log(window.devicePixelRatio);
//备用功能：将图片转变成base64格式，但是必须是服务器地址的路径才可以，否则会报错。
function getBase64(){
var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d')
img= new Image();
img.src='./img/2.jpg';
//var img=document.getElementById('qq')
img.οnlοad=function(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
var dataUrl=canvas.toDataURL('image/png')
$('#img1').attr('src',dataUrl)
console.log('1233')
}
}
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
