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

Question

对于我的项目，我需要通过Chrome控制台将图像（不是网址，图像名称。只有能力的数据，例如，将其粘贴到“Microsoft Paint”）从页面复制到剪贴板。

我试过这个：

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

但它什么都不返回......它只适用于文本。

---

如果你不知道，那么如何通过chrome console下载这个图像？

要么

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

附：我不能使用任何js库。

Answer 1

我在chrome dev工具中探索了一些东西

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

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

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

注意：如果您想获得不同的图像，可以在这里更改img [1]数组

2. 然后，如果您在键盘上按ctrl + v，则可以使用https查看图像网址。请参阅上面的截图。
3. 您可以在新选项卡上执行ctrl v以加载图像。

或者您可以尝试以下方法。

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

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

希望它能在某种程度上帮助你。

Answer 2

正如您所提到的，您正在使用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节点截图，因此捕获页面的可见区域并在之后裁剪可能会更好。

Answer 3

内置功能可以做很多常见的事情;）

#noLibrary #builtInFeature

Command menu

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

截图教程

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

捕获相关选项