[英]Selenium webdriver nodejs - How to crop an image
我正在使用帶有nodejs的selenium-webdriver抓取頁面。 該頁面的一個元素是我要捕獲圖像的驗證碼。 我一直在搜索,但我只發現了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>
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) } }) },
這是我的解決方案,我也解決了很長時間。
我最終使用了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用於所需的元素。 最后是拍攝的第一個屏幕截圖。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.