通过Chrome控制台从页面保存/复制到剪贴板图像

Question

对于我的项目，我需要从以下位置复制图像 （不是url，图像名称。仅用于功能数据，例如，将其粘贴到“ Microsoft Paint”） Chrome控制台将页面转到剪贴板。

我尝试过：

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

但是它什么也没返回……仅适用于文本。

---

如果您不知道，那么如何通过chrome控制台下载此图像？

OR

如何制作页面截图并使用Chrome控制台复制或下载？

P.s。我不能使用任何js库。

Answer 1

正如您所提到的，您正在使用Selenium，这是使用Selenium保存图像的方法：

您需要获取图像的URL，将其加载（在本示例中使用ImageIO）并保存。例如，在Java中，您将执行以下操作：

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();
}

如果您想直接复制它，则您的类需要实现java.awt.datatransfer.ClipboardOwner，然后您将执行以下操作：

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();
}

关于您的其他问题，以下是使用Chrome DevTools截屏的方法：

Chrome DevTools中有3个 Capture ... 命令。只需按照以下步骤操作即可：

1. 打开DevTools。

2. 转到元素选项卡，然后单击要为其截屏的元素。

3. 在Mac上按 Cmd + P ，在Windows上按 Ctrl + P 。

4. 键入> screen。您将获得3条相关建议：

   • Mobile捕获全尺寸屏幕截图：捕获整个页面，包括不可见（视口外）区域。

   • Mobile捕获节点屏幕截图：捕获单个节点，在这种情况下，捕获您在第二步中单击的元素。

   • Mobile捕获屏幕截图：捕获页面（视口）的可见区域。

5. 单击任意一个，屏幕截图将自动下载。

但是，请记住，此功能并非总是可以正常使用，尤其是 Capture节点屏幕截图，因此最好捕获页面的可见区域并在之后进行裁剪。 / p>

Answer 2

我在 chrome开发工具

中探索了几件事

https://homeguides.sfgate.com/stop-air-flow-ceiling-air-diffuser-28867.html-这是我用来参考的网站。

1. 在Chrome控制台中，尝试以下命令

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

注意：如果要获取其他图像，可以在此处更改img [1]数组

1. 然后，如果您在键盘上按ctrl + v，则可以使用https查看图像URL。请看上面的截图。

2. 您可以在新选项卡上执行ctrl + v来加载图像。

或 您可以尝试以下方法。

1. 右键单击图像，然后单击检查元素
2. 您可以看到一些图片网址。复制该URL

1. 打开新标签页并粘贴网址
2. 如果右键单击它，可以看到“保存图像”选项。

希望它会在某种程度上帮助您。

Answer 3

有内置功能可以完成许多常见的事情；）

#noLibrary #builtInFeature

命令菜单

• CTRL + SHIFT + P
• https://umaar.com/dev-tips/98-command-menu/

屏幕截图教程

https://umaar.com/dev-tips/151-screenshot-capture/

与捕获有关的选项