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

问题描述 投票:0回答:3

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

我试过这个:

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

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


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

要么

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

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

javascript google-chrome google-chrome-devtools
3个回答
0
投票

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

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

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

enter image description here

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

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

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

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

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

enter image description here

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

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


0
投票

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


0
投票

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

#noLibrary #builtInFeature

Command menu

截图教程

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

捕获相关选项

enter image description here

热门问题
推荐问题
最新问题