如何使用html2canvas
1.引入html2canvas
2.
html2canvas(document.body, {
onrendered: function(canvas){
document.body.appendChild(canvas);
},
width:300,
height:200
});
然后就在document.body中append了一个canvas.
3.如果想要实现生成一个图片,可以这样实现:
html2canvas(document.body, {
onrendered: function(canvas){
//document.body.appendChild(canvas);
var img = canvas.toDataURL();
console.log(img); //在console中会输出图片的路径,然后复制在浏览器一粘贴,就可以看到。
},
width:300,
height:200
});
如何使用html2canvas
1.引入html2canvas
2.
html2canvas(document.body, {
onrendered: function(canvas){
document.body.appendChild(canvas);
},
width:300,
height:200
});
然后就在document.body中append了一个canvas.
3.如果想要实现生成一个图片,可以这样实现:
html2canvas(document.body, {
onrendered: function(canvas){
//document.body.appendChild(canvas);
var img = canvas.toDataURL();
console.log(img); //在console中会输出图片的路径,然后复制在浏览器一粘贴,就可以看到。
},
width:300,
height:200
});
4.如果想要实现用户任意截屏,可以考虑这样实现:针对某个区域(即某个dom元素),或者默认是整个页面,创建一个canvas,比如:
这时就是一个类似截屏的x 手型鼠标,然后用户一点,就画一个框框,再赋给一个边框颜色,就感觉像是截屏了,最后再用html2canvas,生成当前的区域的截图,保存图片就好了。