简体   繁体   English

Selenium Webdriver Node.js-如何裁剪图像

[英]Selenium webdriver nodejs - How to crop an image

I'm using selenium-webdriver with nodejs to scrap a page. 我正在使用带有nodejs的selenium-webdriver抓取页面。 One element of the page is a captcha that i want to grab the image. 该页面的一个元素是我要捕获图像的验证码。 I've been searching but i only found java or python codes to do that. 我一直在搜索,但我只发现了Java或python代码即可做到这一点。

So far i got: 到目前为止,我得到了:

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();

The screenshot of the page is working. 该页面的屏幕截图正在运行。 The second part where "//location of captcha" is set i'm not sure because i do not know how to proceed. 我不确定设置“ //验证码的位置”的第二部分,因为我不知道如何进行。 How can i crop the image? 如何裁剪图像?

-- Update (Html code) : - 更新(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>

 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) } }) }, 

Here's my solution, I grappled with it for a long time as well. 这是我的解决方案,我也解决了很长时间。

I ended up using the library easyimage . 我最终使用了easyimage库。 Reference: https://stackoverflow.com/a/32111192/3383534 参考: https : //stackoverflow.com/a/32111192/3383534

First you take a screenshot of the hole page and then crop to the element you want. 首先,您要获取孔页面的屏幕截图,然后裁剪到所需的元素。

Here's how i did it: 这是我的做法:

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;
        }
    );
};

These parameters: valorWidth, valorHeight, valorX, valorY are for the element you want. 这些参数:valorWidth,valorHeight,valorX,valorY用于所需的元素。 And the last is the first screenshot taken. 最后是拍摄的第一个屏幕截图。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM