html2canvas网页截图,html2canvas 实现网页截图

标签：

html2canvas可以通过纯JS对浏览器网页进行截屏，但截图的精确度还有待提高

引用 ： 

主要用法是：

html2canvas(document.getElementById('view'), {

onrendered: function(canvas) {

document.body.appendChild(canvas);

// console.log(canvas.toDataURL())；

},

// width: 300,

// height: 300

});

这是一个demo

html2canvas example

#view{

border: 1px solid red;

background-image: url(image/c05ddd91c8803ea8306f02cf4a10fcdb.png);

background-size: 100%;

width: 100px;

height: 100px;

}

function takePhoto() {

html2canvas(document.getElementById('view'), {

onrendered: function(canvas) {

console.log(canvas.toDataURL());//这是截图的base64

document.body.appendChild(canvas);//这是有截图的画布

},

});

}

运行之后：

点击截图按钮：

下面出现的就是截图，不过不太清楚。

标签：

来源： https://blog.csdn.net/weixin_41863239/article/details/82976835