HTML页面截屏，完整demo，html2canvas，二维码生成，头像上传

最新推荐文章于 2023-01-05 16:21:18 发布

AILIHEIHEI

最新推荐文章于 2023-01-05 16:21:18 发布

阅读量549

点赞数 3

文章标签： javascript html5 jquery

本文链接：https://blog.csdn.net/qq_42780323/article/details/105518758

版权

这个是完整的HTML页面截屏。截屏主要用到html2canvas这个js库。

本文章涉及3个小功能：1.用qrcode生成带logo二维码。2.头像上传功能。3html页面截屏功能。

效果如下：左边是源图样式，右边是截图效果

<!DOCTYPE html>

<head>

<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 >

</div>

</div>

<div>

<p style='text-indent: 2ch;'>eval() 使用与调用者相同的权限执行代码。如果你用 eval() 运行的字符串代码被恶意方（不怀好意的人）修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个 eval() 被调用时的作用域，这也有可能导致一些不同方式的攻击。

</p>

</div>

</div>

</div>

//点击切换头像

$('#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>

AILIHEIHEI

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML页面截屏，完整demo，html2canvas，二维码生成，头像上传

这个是完整的HTML页面截屏。截屏主要用到html2canvas这个js库。本文章涉及3个小功能：1.用qrcode生成带logo二维码。2.头像上传功能。3html页面截屏功能。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><met...
复制链接

扫一扫