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

对于我的项目，我需要通过Chrome控制台将图像（而不是url、图像名称。仅用于将其粘贴到“Microsoft Paint”等功能的数据）从页面复制到剪贴板

我试过这个：

copy（document.getElementById（'someimage'）

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


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

或

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

p.s.我不能使用任何js库。
正如您提到的，您正在使用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();
}

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

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

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

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拍摄屏幕截图：

有三个捕获。。。chromedevtools中的命令。只需按照以下步骤进行操作即可：

打开DevTools

转到“元素”选项卡，单击要拍摄屏幕截图的元素

在Mac上按Cmd+p或在Windows上按Ctrl+p

键入
>屏幕
。您将得到3条相关建议：


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

Mobile
Capture node屏幕截图：捕获单个节点，在本例中是您在第二步中单击的元素

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


点击其中任何一个，屏幕截图将自动下载

但是，请记住，此功能并不总是很好地工作，尤其是捕获节点屏幕截图，因此最好捕获页面的可见区域并在之后进行裁剪。
我在chrome开发工具中探索了一些东西

-这是我用作参考的网站

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

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

然后，如果在键盘上按ctrl+v，您可以看到带有https的图像url。请看上面的截图

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

或您可以尝试以下方法。

在图像上单击鼠标右键，然后单击“检查图元”
你可以看到一些图片url。复制该URL

打开新选项卡并粘贴URL
如果您右键单击它，您可以看到“保存图像”选项
希望它能对你有所帮助
 有内置的功能，可以做许多常见的事情；）

#图书馆内置功能

命令菜单

CTRL+SHIFT+P


截图教程

捕获相关选项
不，我需要图像数据，例如，将其粘贴到“绘制”中。@ILya为什么你不能右键单击图像并单击“复制图像”？因为我使用的是远程chrome控件，它只允许使用控制台命令（我知道selenium）@ILya好的，那么你可以使用selenium来复制或下载图像。看看我最新的答案，也许这就是你想要的。硒对我的项目不好。正如我提到的，我只能使用chrome控制台命令（或js）。这个答案是针对你的最后一个问题：如何制作页面的屏幕截图并使用chrome控制台复制或下载它？这是DevTools中最接近的功能，即使它不在Console选项卡上。@ILya那么这就是您可以做的，但它不能在所有情况下都工作：