最近做到一个项目应用 , 需要把页面截屏并保存为图片. 用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');
}
<?php
$data = $_POST['imgData'];
$str = substr($_POST['imgData'], strpos($_POST['imgData'], ',') + 1);
file_put_contents('./test.png', base64_decode($str));