Capture a screenshot of a specific DOM element (vanllla js)

Question

I have one image to use as background, and then I have different messages to show on this "cards".

I need to make both the text and the image downloadable as a single file.

This is a sample of my code:

/* Container holding the image and the text */

.container {
  position: relative;
  text-align: center;
  color: white;
}


/* Centered text */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="centered">Overlay text</div>
</div>

I've seen there is a way to take a screenshot of a specific element in the DOM by following these steps:

Inspect the element you wish to capture.
Open the Command Menu with Cmd + Shift + P / Ctrl + Shift + P.
Type in screenshot.
You can now capture the screenshot of only the specific element, a viewport screenshot, or a full-page screenshot.

In my case I have many .container elements with their own overlay text and I would like to allow the users to download the .container DOM element as a single image.

As @Abhay-Sehgal suggested, I could show these as independent images and then when the user saves the page they have the html code and the bundle folder with all the images in there. But in order to get to this step I need to generate these images of the DOMs element embedding the text on them.

Is there a way to programmatically take screenshots of DOM elements from the console?
(or even just by running some vanilla javascript code instead of going through the UI of the browser)

How about creating blob of html component (you want to take screenshot) then download it on key press? — Abhay Sehgal, Jan 27 '19 at 05:53
This post might help you? https://stackoverflow.com/q/2255291/7919626 — Word Rearranger, Jan 27 '19 at 05:54
@NTR Thanks for your comment, but in my case I need to produce an image per DOM element. How would I use your suggested solution to generate many images of the DOM elements? — Adriano, Jan 27 '19 at 06:11

score 2 · Answer 1 · answered Jan 27 '19 at 06:26

2

Firefox has that feature. don't know about other mainstream browsers.
firefox console screenshotter description image taken via :screenshot --selector '#hot-network-questions'

answered Jan 27 '19 at 06:26

Alex Python

329
1
8

This is a great feature of firefox, but unfortunately it won't do the job. This command can only be ran in the console if you execute it in that specific context. As soon as you put inside a function it won't work anymore. Running the following function thrown an error: `function takeTheScreenshot() { :screenshot --selector '#hot-network-questions' }` – Adriano Jan 28 '19 at 09:34

Capture a screenshot of a specific DOM element (vanllla js)

1 Answers1