html2canvas截图英文长字符串效果不一致问题解决

论坛 期权论坛 脚本     
匿名技术用户   2021-1-3 07:32   11   0

最近做一个移动端项目,需要使用到对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>


分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP