wgt如何替换原来的html,js使用html2canvas实现屏幕截取的示例代码

整理文档，搜刮出一个js使用html2canvas实现屏幕截取的示例代码，稍微整理精简一下做下分享。

test

*{

margin:0 auto;

padding:0;

}

.btn{

width:100px;

height:30px;

line-height:30px;

background:green;

color:#fff;

border-radius:10px;

-webkit-border-radius:10px;

text-align:center;

display:block;

text-decoration:none;

}

.container{

background:#e5e5e5;

}

$(function(){

$("#btn").click(function(){

html2canvas($("#container"), {

onrendered: function(canvas) {

//把截取到的图片替换到a标签的路径下载

$("#download").attr('href',canvas.todataurl());

//下载下来的图片名字

$("#download").attr('download','share.png') ;

document.body.appendchild(canvas);

}

//可以带上宽高截取你所需要的部分内容

// ,

// width: 300,

// height: 300

});

});

});

截取屏幕

先点击截取屏幕后再点击截图下载

截图下载

以下是测试内容

由于使用最新版本的html2canvas截取屏幕有问题，所以上面使用的是v0.4.1版本进行测试。

注意事项：

1.页面加载完之后再调用html2canvas。

2.截取背景图片没有效果(就算把背景图片转为base64也没有效果)。

3.标签的图片需要转为base64，不然截取没有效果(网上搜索了一下，好像都说是跨域问题)。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。