web.view中对页面元素截图

web.view中cdp能全屏截图，但如何对页面中某个元素截图呢？
通过添加区块坐标，是可以对区块截图的。对元素截图，先获取元素的坐标及大小，然后就可以调用cdp进行区块截图了。
关键代码如下：

var rect = web.json.parse(wb.eval("JSON.stringify(document.querySelector('.footer').getBoundingClientRect())"));

//调用 DevTools 方法，并等待返回结果，失败返回 null
var result  = wb.cdp("Page.captureScreenshot",{
    captureBeyondViewport:true,
    clip:{
        x:rect.x,
        y:rect.y,
        width:rect.width,
        height:rect.height,
        scale:1
    }
});

之前参考js代码，在截图参数中少了scale，结果不成功。以为参数格式不对，但无论如何改都不成功，没有返回数据。加上这个参数就有数据返回。这个返回的是base64格式数据。
截图相关参数如下：

  format: 'jpeg',  // 截图格式（默认为"png"）
  quality: 90, // 截图质量（默认为80）
  clip: {  // 截图裁剪区域（默认为整个页面）
    x: 100,   //横坐标
    y: 100,   //纵坐标
    width: 500,//截图宽度
    height: 500,//截图高度
    scale: 1//缩放比例
  },
  fromSurface: true,// 是否从表面绘制截图（默认为false）
  captureBeyondViewport: true,  // 是否捕获超出视口的内容（默认为false）
  inline: true// 是否以Base64编码的字符串返回截图（默认为false）

需要说的一点是，这种截图，跟我前面文章说的用js生成图片，还是不一样的。js生成的图片，有背景马赛克，识别率较低。而这种直接截图，就是图片，识别率较高。
这是cdp截图：

这是js截图：

web.view中对页面元素截图

评论 (0)