最近做一个移动端项目,需要使用到对web页中的内容进行截图。调用方式比较简单,加载之后直接调一个方法就截取出来了,但是需要注意几个问题,毕竟是模拟截图,所以只支持部分的CSS特性,对iframe、flash、java插件等无能为力。做的过程中遇到一个对word-break:break-all属性不支持的情况,结果就导致截出来的内容如果英文折行显示效果就会与现有的样式不一致,解决办法就是将letterRendering属性设置为true。
<html>
<head></head>
<body>
截图测试
<img id="test_pic">
<script>
/**
* 截图
*/
function screenShot()
{
html2canvas(eleMain, {
allowTaint: false,
taintTest: false,
letterRendering:true,
onrendered: function(canvas) {
canvas.id = "canvasDemo";
dataUrl = canvas.toDataURL();
document.getElementById('test_pic').src = dataUrl;
}
</script>
</body>
</html>
|