Selenium webdriver nodejs - 如何裁剪图像

时间:2016-12-04 11:31:13

标签: javascript node.js selenium

我使用selenium-webdriver和nodejs来废弃页面。该页面的一个元素是我想要抓取图像的验证码。我一直在搜索,但我只发现了java或python代码。

到目前为止我得到了:

function writeScreenshot(data, name) {
  name = name || 'ss.png';
  var screenshotPath = '/Users/Projects/screenshots/';
  fs.writeFileSync(screenshotPath + name, data, 'base64');
};

driver.takeScreenshot().then(function(data) {
  writeScreenshot(data, 'out1.png');
});

//location of captcha
var capt = driver.findElement(webdriver.By.xpath('myXPath');
var location = capt.getLocation();
var captAltura = capt.getSize().getHeight();
var captLargura = capt.getSize().getWidth();

该页面的屏幕截图正常运行。第二部分" //验证码的位置"因为我不知道如何继续,所以我不确定。 我该如何裁剪图像?

- 更新(Html代码)

<form name="form" method="POST">
<table width="750" cellspacing="0" cellpadding="0" border="0">
  <tbody>
    <tr bgcolor="#CCCCCC">
      <td width="100%" height="31" align="center">
        <font class="code">Code:</font>
        <input type="text" name="captcha" size="4" maxlength="4" value="" title="Security Code" class="inputcaptcha" onclick="this.select()">
        <img src="captcha.php" width="90" align="middle">
      </td>
    </tr>
  </tbody>
</table>
</form>

2 个答案:

答案 0 :(得分:1)

screenshotElement: function (driver, locator) {
    return new Promise(async (resolve, reject) => {
      try {
        let base64Image = await driver.takeScreenshot();
        let decodedImage = new Buffer(base64Image, "base64");
        let dimensions = await driver.findElement(By.xpath(locator)).getRect();
        let xLoc = xext + dimensions.x;
        let yLoc = yext + dimensions.y;
        let eWidth = eleWidth + (xLoc * 2 - 300);
        let eHeight = eleHeight + yLoc;
        let image = await Jimp.read(decodedImage);
        image.crop(xLoc, yLoc, eWidth, eHeight).getBase64(Jimp.AUTO, (err, data) => {
          if (err) {
            console.error(err)
            reject(err)
          }
          imgConvert.fromBuffer({
            buffer: data,
            output_format: "jpg"
          }, function (err, buffer, file) {
            if (!err) {
              let croppedImageDataBase64 = buffer.toString('base64')
              resolve(croppedImageDataBase64)
            }
            else {
              console.error(err.message);
              reject(err)
            }
          })
        });
      } catch (err) {
        console.error(err.message);
        reject(err)
      }
    })
  },

这是我的解决方案,我也解决了很长时间。

答案 1 :(得分:0)

我最终使用了库easyimage。参考:https://stackoverflow.com/a/32111192/3383534

首先,您将获取孔页面的屏幕截图,然后裁剪为您想要的元素。

以下是我的表现:

function cropInFile (valorWidth, valorHeight, valorX, valorY, srcFile){
    easyimg.crop(
        {
            src: pathFile,
            dst: pathFile,
            cropwidth: valorWidth,
            cropheight: valorHeight,
            x: valorX,
            y: valorY,
            gravity: 'North-West'
        },
        function(err, stdout, stderr) {
            if (err) throw err;
        }
    );
};

这些参数: valorWidth,valorHeight,valorX,valorY用于您想要的元素。最后一张是第一张截图。