How to capture entire scrolling <div> into an image - java

I am currently using "Selenium" to develop web auotomation scripts in Java. I am trying to find a way to capture entire scrolling DIV(html) into an image. Any quick solution ??
Example: http://i.stack.imgur.com/AZduC.png

When you say you want the content, do you mean the HTML or just the text on the screen? If its the text, you can use an XPATH like selenium.getText(//div[#id='theDiv']). If its the HTML, you could evaluate JavaScript on the page to the the innerHTML, like this:
selenium.getEval("this.browserbot.getCurrentWindow().document.getElementById('theDiv').innerHTML")

You can get a screenshot of the whole page with Selenium's captureEntirePageScreenshot(String imageFileURLToWrite).
In principal it should be possible to post process the image to extract just the DIV. You'd need to work out the exact pixel bounds of the DIV, which would probably require the use of getEval() to run some JavaScript on the client.

Its pretty easy.
You take screenshot from the browser window
You take location X and Y of the Div
You take size of the Div: Width and Length
Create Bitmap with the same size and copy subimage using info from 2 and 3 from screenshot taken in step 1.
If you want I can give you code from C#. But its not so hard and I believe you can code it by your own hands.

Related

Add text to last page of existing PDF with java

I know there are many suggestions how to resolve problems with edition existing PDF, but among all of those, I couldn't find a solution for my problem.
I need to add information about file acceptance ("Document accepted by Tom Smith, 2020-01-01" - possible multiple acceptations) to the last page of the PDF. I need to determine if page is filled or is there enough space for my text.
I wanted to find position (y) of the last element on the last page of the pdf to check it against page size. If the page is full I'm going to add a new page and then add new text.
I have no idea how to resolve this. I tried looking for answers with iText and PDFBOX, but there are no satisfying resolutions.
Raster Image based approach:
Render the last page of the pdf to a bitmap image with any library you are comfortable with (Ghostscript?). 72 dpi should be enough for your purpose.
Then you can use any image processing library like openCV and check rectangular areas starting from the bottom up, if pixel exist. openCV is very fast with the CountNonZero() function.
You can also find any large white zone that is anywhere in the Image, not just at the bottom. This link could be your starting point.
https://answers.opencv.org/question/72939/how-to-find-biggest-white-zone-in-an-scanned-image/

How to Print a Page to PDF Only with X Y Coordinates

I got a peculiar problem. I am business analyst working on a dash-boarding product based on java applet. I don't have access to any elements in the java applet it's like a black box.
I am looking to print a section of page without using html elements (since I don't have access to code). Ideal case would be using something like window.print() that takes Start (X,Y) and End (X,Y) coordinates .Then in the dialog I can select pdf995 option to print as pdf.
For e.g. (23,45) to (93,100) pixels should print the area within that range. Instead of pixels, percentage should be good as well.
Any help is greatly appreciated. Thanks guys.
Maybe this will help. How to get the X,Y coordinates of a point in a PDF
On that question you should have everything you need.
You can use java.awt.Robot ; java.awt.Image to take the ScreenShot and write a Image File (bmp or jpeg, or what you like); next, you can use Jasper Report to create a PDF and view the file report. Jasper its a powerfull library to create reports, website here
You can find some details to how take screen shots here. Its also possible to take screen shots with cordinates. You can see some examples here

Can you convert a Selenium WebElement into a byte array or image object (using Java)?

I would like to validate an image generated by the web server I am developing. I want to check the image layering is correct by finding out what colour a particular pixel in the image is. The image is contained by an with the background-image attribute set to a URL that returns that image. I have seen several mentions of using a screen capture to get the actual image but I wondered if there is a way to get only the image rather than the entire web page.
Can you:
do a screen capture on a WebElement
extract the bytes the image comprises of
or is there some other way?
Try aShot Util it allows to take screenshot of webelement and convert it to byte array.

Get dominating color of a specific area in an image: Color Query for Web Page Elements

Problem Description
I am writing a Java application that lets programmers query for page elements on a web page by specifying visible attributes. One of the most important and difficult is Color.
To be specific, i need a way to get the user-visible color of web page elements using Selenium 2 and Webdriver. I want to be able to query for color values (#ff0000) or names (red).
One parameter should control the percentage of similar colors needed to be "dominating" enough. If set to 100% the element is not allowed to have any other color. If set to 50% the element needs to be halfway filled with the color.
There should be another parameter to control the "tolerance" of these colors. With a higher tolerance, red could also match the orange "Ask Question" button here on Stackoverflow.
Example
Given the well-known Stackoverflow web page, i highlighted the page element to check:
With a higher color tolerance and a not too high domination percentage, the following queries should return the specified result:
color('#FFEFC6') // exact match: true
color('yellow') // match in tolerance range: true
color('orange') // true
color('blue') // false
color('green') // false
My first approach
Best bet would be using CSS attributes like color and background-color. But these do not take images into account, which are needed for good color queries. Also, they could produce difficulties because of css selector inheritance and the handling of transparency. In addition, absolutely positioned elements with a higher z-index above the current element could produce unexpected results.
Given is the web page element to check. It is represented either as JavaScript DOM element (or JQuery object) or as RemoteWebElement in the Java bindings of Webdriver.
It is possible to take automated Screenshots of the current state of the web page (i am using Firefox), see here: Take a screenshot with Selenium WebDriver
The coordinates of the page element to check are known. Therefore, the screenshot image could cropped to that size and area and be analyzed somehow to check if the query returns true or false.
Implementation
I am not limited to Java in this case. JavaScript would be very nice because i am doing the other queries with the help of JQuery too. Performance matters. I am counting on you, i fear this is a very difficult task. Therefore i need your input.
UPDATE
I solved this issue by taking screenshots and analyzing the pixel data of the relevant part. That way i can deal with all kinds of background images and transparency. It's part of the Abmash framework, which is open source and free to anybody to use: Abmash on Github
Easiest way:
Get screenshot (save in memory)
Crop screenshot to the element top = el.offsetTop, left = el.offsetLeft, width = el.offsetWidth, height = el.offsetHeight
Get the pixel data for the cropped image
Loop through the pixels getting the total sums of the R, G, B elements then divide the total sums by the pixel count to get the average. Test the average color against your constraints.
If you really want to use JavaScript
You could send the pixel data to JavaScript for processing if you're intent on doing the final check in JavaScript.
Or you could send JavaScript the IMAGE URI for the cropped image. Then draw that IMG to a CANVAS then loop through the pixel with ctx2d.getImageData(...)
Only do the above if the element is an IMG or a has a background-image CSS. Just use color and background-color CSS checks otherwise.

Printing GIF files from a browser

We are currently leveraging a third party tool to convert pdf files into gifs and displaying them in the browser. We have been adjusting the DPI of these images so that when printed they will look as close as possible to what the original pdf looked like. We've found that at least a setting of 300 DPI matches roughly the clarity of what the pdf will display when printed. However if we try to load a GIF image with a setting of 300 DPI into the browser using HTML the image is very large and causes scrolling. I was able to get around it by setting the height and width of the image tag, however when/if the margins on the Print preferences changes the image will be chopped when printed. If we print the images as is through an image viewer they print fine.
So that leads me to my question, is there some other third party tool that we could call from a webpage that would load these images and give printing capabilities through some sort of a Java applet?
I recommend to embed the PDF file inside your HTML page, so if you print, you have full capatibilies, and you don't need to "duplicate" que information.
If you have to use GIF images (for any reason), you could have two views, one small, wihout scrolls, for viewing the HTML page, and other only with the GIF image. When you click "Print" in the HTML page, you see a kind of "Print preview", larger, with scrolls or whatever.
Hope it helps.

Categories