Save/copy to clipboard image from page by chrome console

Question

For my project I need to copy image (not url, image name. Only data for ability, for example, to paste it to "Microsoft Paint") from page to clipboard by Chrome console.

I tried this:

copy(document.getElementById('someimage'));

but it returns nothing... It only works with text.

---

If you don't know, then how to download this image by chrome console?

OR

How to make screenshot of the page and copy or download it using Chrome console?

P.s. I can't use any js libraries.

Answer 1

As you mentioned you are using Selenium, here's how to save an image with Selenium:

You need to get the image's URL, load it (using ImageIO in this example) and save it. For example, in Java you would do something like this:

try {
    driver = new ChromeDriver();
    driver.get("http://...");

    WebElement img = driver.findElement(By.cssSelector("#selector"));
    BufferedImage buffer = ImageIO.read(new URL(img.getAttribute("src")));
    ImageIO.write(buffer, "png", new File("image.png"));
} catch (Exception e) {
    e.printStackTrace();
} finally {
    driver.close();
}

If you want to copy it directly, your class needs to implement java.awt.datatransfer.ClipboardOwner and then you would do something like this:

try {
    driver = new ChromeDriver();
    driver.get("http://...");

    WebElement img = driver.findElement(By.cssSelector("#selector"));
    TransferableImage transferable = new TransferableImage(ImageIO.read(new URL(img.getAttribute("src"))));
    Toolkit.getDefaultToolkit().getSystemClipboard().setContents(transferable, this );
} catch (Exception e) {
    e.printStackTrace();
} finally {
    driver.close();
}

Regarding your other questions, here's how to take a screenshot using Chrome DevTools:

There are 3 Capture... commands in Chrome DevTools. Just follow these steps to get to them:

1. Open DevTools.

2. Go to the Elements tab and click on the element you want to take the screenshot of.

3. Press Cmd + P on Mac or Ctrl + P on Windows.

4. Type > screen. You will get 3 relevant suggestions:

   • Mobile Capture full size screenshot: Captures the whole page, including the non-visible (out of viewport) area.

   • Mobile Capture node screenshot: Captures a single node, in this case, the element you clicked in the second step.

   • Mobile Capture screenshot: Captures the visible area of the page (viewport).

5. Click on any of them and the screenshot will download automatically.

However, keep in mind this feature doesn't always work fine, especially the Capture node screenshot one, so it might be better to capture the visible area of the page and crop the afterwards.

Answer 2

I have explored few things in chrome dev tools

https://homeguides.sfgate.com/stop-air-flow-ceiling-air-diffuser-28867.html - This is the website I am using it for reference.

1. In Chrome console try the following command

imageurl= document.getElementsByTagName('img')[0].currentSrc;
copy (imageurl);

Note: Here you can change the img [1] array if you want to get different images

2. Then if you press ctrl + v in your keyboard you could see the image url with https. Please see the above screenshot.

3. You can perform the ctrl+ v on your new tab to get the image loaded.

or You can try the following method.

1. Right click the image and click inspect element
2. You could see some image url. Copy that URL

3. Open new Tab and paste the URL
4. If you right click on it you can see "Save Images" option.

Hope it will help you in someway.