使用html2canvas进行屏幕截屏

最近做到一个项目应用 , 需要把页面截屏并保存为图片. 用html2canvas 可以非常方便地办到, 以下来介绍html2canvas的使用

使用之前, 有一些需要知道的事情

1. 在不通过代理的情况下只能加载同源（相同域名）的图片, 如果被渲染页面有其它的canvas，会被跨域内容污染, html2canvas可能无法正常渲染.

2. html2canvas无法渲染flash和java小应用, 当然也没办法渲染iframe的内容

点击查看其它参数

以下是简单应用示例:

var element = document.body; //任意一个dom元素, 截屏这里应该是整个body
html2canvas(element, {
    onrendered: function(canvas) {
        //canvas.toDataURL() 获取base64l编码过的内容, 默认为png
        saveImage(canvas.toDataURL());
    }
});

function saveImage(data)
{
    $.post('process.php', {imgData: data}, function(data) {
        if (data.state == 'ok') {
            alert('截屏成功');
        }
    }, 'json');
}

 

$data = $_POST['imgData'];
$str = substr($_POST['imgData'], strpos($_POST['imgData'], ',') + 1);
file_put_contents('./test.png', base64_decode($str));

下载html2canvas