I was checking a website where there was a list of people with different nationality
I inspected the elements because I wanted to download the nationality image for each person
the problem was that the image is not inside an IMG tag where I can just open the src attribute and get the link. I used something like getcomputedstyle(element).backgroundImage... and I got the link that I want, but now I'm facing a different problem which is the image I'm trying to download contains all the flags for every country around the world, and somehow only 1 flag is getting shown for each user in the website
how is that possible? I have never seen anything like this, could someone clarify this process to me too?
because I want to get the flag for each user, also I'm interested in the technique used
I uploaded the link to https://ibb.co/VxjK66B
Thank you
The technique calls "sprite". A map of images in one pig peace. By using it like background-image we can manipulate with background-position to move image in a small area. The size of a block - one flag size in this case. Each country has different background-position values.
You can read more about sprites here:
https://www.w3schools.com/css/css_image_sprites.asp
Related
OBJECTIVE
I am scraping a website. This is an example of a product page I am having trouble with.
When one clicks on one of the variations on the right, all (or most, depending on the product) of the images on the left change. All that I need to do is determine which photos in the gallery belong to which of the variations from the source code.
WHAT I MANAGED TO FIND OUT
The image list that contains all images is located in a div of class name "sly_carousel". When a click takes place, their style="display:" is either set to none or removed.
PROBLEM
I can't find where the rules that determine which images are shown/hidden on the left when an image on the right representing a variation is clicked on are located so that I can then tell which image belongs to which variation.
WHAT I HAVE TRIED
I inspected the code to the very best of my ability using Chrome's inspector. I found nothing either in the source or inside the little CSS window that also appears.
PAGE LINK
https://www.feiradamadrugadasp.com.br/corretivo-liquido-natural-beauty-jasmyne-1/p/194164/
A kind friend taught me it was actually done via a post request. Thanks anyhow!
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 need two things:
a great resource that goes into detail about all the various template variables....i finally found a resource that lists all of the variables on springmerchant...but it doesnt speak about what they do and/or how they do it.
secondly, this is for switching the bigcommerce-standard cloudzoom feature for something like a flexslider slideshow; therefore, i would love some insight into product images and what variables i can use....i know there is a variable that will output a specific products' tinyimages/thumbnails dynamically based on unknown method...i would like to know if there is a variable that does this except with full-size images.
what i am trying to accomplish:
something similar to coton-colors product-slider http://coton-colors.com/black-chevron-dinner-plate
Why not just grab the data that is already part of the product page? The tiny thumbnails have data attached to them pointing to the full res images(you should be able to find those variables, too). You can just use a script to create an array based on each full size image, then pass the values into your slider.
For the best list of variables and where the can be used, take a look at https://developer.bigcommerce.com/themes/snippets and https://developer.bigcommerce.com/themes/panels
By clicking on each panel or snippet they show you the variables that can be used.
Best of luck!
i am building a workout website that tracks exercises. Each exercise has a mapping to a certain part of the body (bench press --> Chest)
I am trying to figure out a way to visualize this and i thought of the idea of putting an image of a person "highlighting" the affected muscles. Sort of like This:
(source: aquaviews.net)
Assuming i have found a good picture without any areas highlighted, is there anyway to dynamically "highlight" areas in a picture (the red section) with javascript (client side) or C# (server side) or do i need a seperate picture for every exercise?
You COULD overlay the the base image with SVG or a <canvas> element.
But then you have cross-browser issues, possible alignment problems, and probably a cheesy look.
I'd have an artistically inclined person do the highlights as a separate graphic for each exercise.
But rather than have these as separate images, keep/combine them in a single file -- as a CSS Sprite. Then you get a professional appearance, great cross-browser support and easy, minimal coding.
You can use css to position your links over said muscle group and use a rollover to show the highlighed part...
Edit:
Sorry I guess I should have elaborated. You can absolutely position the elements with CSS and use an image rollover to swap out that section of the image to the highlighted section of that image. You can either do this by putting each muscle group into it's own div and putting an image of the corresponding muscle group into the background image. Then swap it out on rollow over. or you can use z-index and absolutely position the rollover elements where they need to be and change the z-index when needed.
Interestingly enough, I used to be a personal trainer and I did this same thing but did it in flash. That's my recommendation.
However, if you want to do it with JS and CSS, Brock's suggestion of the sprites is likely the way to go.
What you could do, very simply, would be to have an image map that for certain areas called a js function to swap about the background image with the same version of that image with the highlighted sections. Rather than several small images, you have the same image but with one part highlighted.
One question though, will you be doing compound exercises that would require you to have two sections highlighted? For instance, an incline press would highlight part of the chest and part of the delts. This makes the whole proposition more complicated due to the specificity of your roll overs.
i think you seeking a way to do this without requiring separate images, and if so - the answer is No - you are going to need to create separate images for at least the highlighted areas. Short of perhaps using a CANVAS element which has cross-browser issues, I don't believe there is any way to impose a filter to an arbitrary region of an image element.
And even if you Could apply an alpha filter, you would still need the geometry of every shape, so the effort/work is perhaps the same...
Once you have the various images there are sundry ways to approach the problem after that...
This is a simple implementation as i have done this highlighting with a county map. Use an image map. Then find a highlighting script like (mapper.netzgesta.de) mapper.js. All you need to do is have a properly set up image map (image must be suuounded by a div) and a link to this script. The highlighting starts immediately. Please check the license. Ther are several other that scripts that use javascript css and jquery to achieve this same effect. Just research highlight image map in google. Sorry i cant give you a link to my implementation of this as it is on a secure site for work. Good Luck.
This is a long shot but I've seen things which might make it posssible.
I have a div, which is filled with images. Album covers if you must know. And I want to allow users to download this as an image. So they could use it as something like a desktop background.
So is this possible? Get this visual representation of an element and display it as an image?
Basically you can't do that. At least crossbrowser. But if it is not critical. You can try <canvas>
check here http://www.nihilogic.dk/labs/canvas2image/
Assuming I understand the question...If you know the position of the images in the div, you could concatenate the images together server side into a single image. Then just have a button users can click on that will call the function to assemble and download this image.
From what I understood from your question you can use an
img
tag for this. The user can view the image in the browser and can save it to their hard drive.
from your description each of the image inside will be a different album cover, so combining these into a single image won't a good idea.
You could possibly do the rendering serverside. By this I mean that you could generate the HTML and kind of "screenshot" it on the server. The result would nearly always be at least slightly different from what the user sees, but depending on your requirements it might be enough.
There are various tools to do this, for example wkhtmltoimage, which is a sister project of wkhtmltopdf and can be found at https://code.google.com/p/wkhtmltopdf/