I'm searching for Javascript (JQuery if possible) plugin that can generate an image representing the inner content of a DIV.
Example : This link shows an image containing 3 x 3 box display.
What I would like is that these boxes could contain an automatically-generated picture showing what a specific DIV's content look like.
Is there such a thing?
If you don't have too much content on the screen, this seems like a simple option
html2canvas
It is well documented
Well tested
But it will not work for all elements
It will not work with all atributes
But this is the solution if you want to take the screenshot of your page only(where you know the possible attributes and elements)
I don't think that Javascript can create an image from the scratch, but for sure is possible to make that on the server and use JS to make an AJAX call to it.
Hope this helps.
You could use "webkit to image" wkhtmltoimage: https://code.google.com/p/wkhtmltopdf/ I've used it to generate images from javascript graphs and tables etc. Any html will work. Its not purely javascript, but you could send the html div (and relevant css) to the wkhtmltoimage and get the image back via ajax.
Related
Case :
I have 2 iframes and both have lot of divs and other controls so both iframes are like the medium size of HTML websites. I want to compare both and find out differences.
I thought different options here :
Solution 1: Take a full screenshot of 2 iframes and compare both screenshots using the pillow library of Python which draws the grid on the mismatch area in a screenshot. But here the issue is I did not find any code on the internet which can take full iframe screenshots (I have a long iframe with a scroll bar). I tried almost all answers on SO but all are working for a normal page but not for the iframe.
Reference : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196
Solution 2: Get somehow all HTML code from both iframe and compare it, but this won't be easy to analyze result because it will find some HTML code that is different or have a mismatch in 2 iframes. This will be more like text compare and not a good solution I believe.
So I am looking for either code which can take a full screenshot of iframe using Python or Javascript OR some better option which allows me to compare 2 iframes and find out differences.
I tried almost all answers which google find our as per below :
Sample Iframe is given here where whole html is within iframe : https://grapesjs.com/demo.html , If some code can take full screenshot of this iframe then it will be easy to compare for me.
As we discovered in our chat, the iframes under discussion are generated in javascript and not loaded from a URL.
This presents a difficulty in automating screen grabbing the iframe, however a manual process is possible:
In Firefox right click on the iframe and select "This Frame" in the popup menu, then select "Save Frame As...".
Once the frame is saved, some of the downloaded CSS will need to be fiddled with to get the background URLs to point to the correct place. Having done that, open the html file locally and you will be able to take a screen shot using the method you currently use for a normal web page.
Grabbing part of the screen
You can either grab it manually or automatically. If there are not many iframes to compare, then doing it manually is an option, you just do a screenshot which contains the content and crop the image if necessary. The difficulty of this approach is that you need to be very very precise while cropping.
You can do it automatically as well, for example loading the part of the DOM into a canvas and making a picture of it, like here: Using HTML5/Canvas/JavaScript to take in-browser screenshots
Also, you can modify temporarily your content to make sure the whole page is what you are interested about and then do a screenshot, as described here: https://www.cnet.com/how-to/how-to-take-a-screenshot-of-a-whole-web-page-in-chrome/
Comparing two images
You can compare two images by looping all their pixels and comparing them.
Algorithm to compare two images
Showing the results
Your program should take two images as input and create a new image of similar size as output. I would suggest that the target image should show the pixels of one of the images to compare and to draw a red line at the border of each differences. For this purpose you will need to divide a region of differences into rectangles. This way you could see where the differences are and what is the content that is different.
You could use pillow in combination with pyautogui, mayby pyautogui alone.
Some pseudo code:
As long as the scrollbar doesnt touch the bottom:
- take a screenshot
- save screenshot name in list
- scroll down, continue this loop
Do the above loop again for the second iframe
compare all the screenshots from the two lists of screenshots you have generated.
Well, that's how I would do it. There are probably better ways though.
Use html2canvas for taking screenshot
html2canvas(document.getElementById("img_dots")).then(
function (canvas2) {
var img_data2 = canvas2.toDataURL('image/png');
var im_data2 = img_data2.replace('data:image/png;base64,', '');
$.ajax({
type: "POST",
url: "send_image_to_backend",
data: {
"base64data": im_data2,
// "filename": filename.split(".")[0]
"filename": new_filename + ".png"
}, success: function () {
//send second image and compare
}
});
}
);
This will enable you to send images to back-end.
Use this thread to tweak html2canvas to fetch entire image
Once you have both images you can use openCV to find difference between 2 images
you can refer to this - https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/
I have 2 iframes and both have lot of divs and other controls so both iframes are like the medium size of HTML websites. I want to compare both and find out differences.
What do you want compare ? CSS rules/properties differences ? Data/text differences ? Or visual render ?
Compare visual render
You can extract the iframe URL and load the page with Selenium to take screenshot (see example). Also you have firefox extension Selenium IDE.
I have a type of word cloud that I developed. Its really just a simple database search result that applies random CSS styling (size, color, vertical layout, etc) to keywords to make it look pretty inside a div or single cell table. These keywords get retrieved via a PHP/mySQL function.
I would like to be able to output that DIV/table cell's (whichever would work better) contents along with the CSS styling to an image file. I've seen posts suggesting HTML2Canvas but haven't had any luck getting the search results with the CSS to show up in the image and not even sure if its possible in this case.
Any ideas to point me in the right direction?
Thanks,
You could use an html to pdf script, like this one, and then use the imagick php function to convert that to an image.
Source: http://buffernow.com/html-to-image-php-script/
I need to load a very large text into a dialog box using YUI or jQuery and I'd like to know the best way to do it. I have an Oracle CLOB column which I need to show if the user needs to know what was stored there. Since CLOB data are huge, it is impossible to load everything. Any ideas?
Use multiple divs and load each one with what's left of your clob content when your user drops cursor in it : you can do this either using connection manager for YUI 2 or nodeList if you are using YUI3 (here's an example of how to use it)
Put it in a fixed-size DIV and add: overflow-y:auto.
Let's say you have a png and it contains all of the icons that are to be used on one page, what is the process of using JS to select and display on a certain icon in that image? I've always seen it being done, but it seems to evade me what it is, and how to do it.
It's done with CSS, not JavaScript, and it's called sprites.
http://css-tricks.com/css-sprites/
You would use CSS and if you want it to be a really painless experience use this website below.
http://www.spritebox.net/
It will take care of generating the picture and also making generating the CSS you will need to output the icons.
Sprites, but you would probably use CSS rather than Javascript.
I guess you are referring to sprite image. js or css can be used to select images.
There are several images in folder . I want to fit as many images as possible from the folder into an html page. The images will be selected at random and will have different width & height. I don't want the dimension of the images to change.
How can this be accomplished ?? is this doable with JavaScript ?
This looks pretty complicated to me . is there a simple way of doing this via some other method (server side)?
thanks
Edit: so basically we have a room in which we want to pack as many boxes as we can , the boxes all have different size and cannot be stacked over one another..
This sounds like the bin packing problem:
http://en.wikipedia.org/wiki/Bin_packing_problem
http://mathworld.wolfram.com/Bin-PackingProblem.html
It would be doable but more difficult I think in JavaScript,
You could use a server side language like PHP to do it like this:
load random image files
add up their widths and stop adding images after you've reached your desired page width (do this for height too)
let PHP echo out the images as html <img/> elements with a basic html layout surrounding it or an empty layout
If you could elaborate some more about the details of the page (kind of layout , etc.) I might be able to provide a more specific answer.
Hope this helps.
Update:
It's quite easy to do in php,
if you would do it in javascript I would imagine the approach being something like this:
page with <img width="" height =""/> elements
using the DOM functions to get the elements and iterate through them to make a list while you are still below your maximum width and height
place them next to each other with CSS positioning