透過Selenium的無頭ChromeDriver的透明屏幕截圖

Question

據我瞭解，ChromeDriver本身並沒有設定CSS的背景。因此，如果背景是透明的，爲什麼我沒有獲得透明的截圖？

這就是所謂透明網站的截圖： 相同的屏幕截圖，但在後臺紅色div來展現，其中透明度應在於：

這裏是我的代碼：

from selenium import webdriver 
from selenium.webdriver.support.ui import WebDriverWait 
from selenium.webdriver.support import expected_conditions as EC 
from selenium.webdriver.common.by import By 
from datetime import datetime 

options = webdriver.ChromeOptions() 
options.add_argument('headless') 
driver = webdriver.Chrome(chrome_options=options) 

driver.set_window_size(2560, 1600) 
driver.get('https://twitter.com/realDonaldTrump/status/516382177798680576') 
# driver.execute_script("$('body').append(`<div style='background: red; width: 100%; height: 100%;'></div>`);") 
driver.save_screenshot('screenshots/' + str(datetime.now()) + '.png') 

driver.quit() 

我如何能夠創建該截圖的透明版本？

*編輯* 我做了一個如何完成這一點的要點。接受的答案幫助我達到了我可以弄明白的地步，這正是我想要的。然而，這個要點正確的解決了我的問題： https://gist.github.com/colexyz/f58834ff09ab07e3c1164667b753e77a

Answer 1

的一種方法是由阿爾法字節設置爲0，每個白色像素從截圖轉換成透明像素：

from selenium import webdriver 
from PIL import Image 
from io import BytesIO # python 3 
import numpy as np 

def remove_color(img, rgba): 
    data = np.array(img.convert('RGBA'))  # rgba array from image 
    pixels = data.view(dtype=np.uint32)[...,0] # pixels as rgba uint32 
    data[...,3] = np.where(pixels == np.uint32(rgba), np.uint8(0), np.uint8(255)) # set alpha channel 
    return Image.fromarray(data) 

driver = webdriver.Chrome() 
driver.get("http://www.bbc.co.uk/news") 

# take screenshot with a transparent background 
with Image.open(BytesIO(driver.get_screenshot_as_png())) as img : 
    with remove_color(img, 0xffffffff) as img2: 
    img2.save(r"C:\temp\screenshot.png") 

然而，你可能最終與如此我意外的透明像素，如果頁面內容有一些白色的像素，antialiassing可能會看到。

另一種解決方案是使用Chrome瀏覽器的API DevTool排除從截圖背景：

from selenium import webdriver 
import json 

def send(cmd, params={}): 
    resource = "/session/%s/chromium/send_command_and_get_result" % driver.session_id 
    url = driver.command_executor._url + resource 
    body = json.dumps({'cmd':cmd, 'params': params}) 
    response = driver.command_executor._request('POST', url, body) 
    if response['status']: raise Exception(response.get('value')) 
    return response.get('value') 

options = webdriver.ChromeOptions() 
options.add_argument("disable-gpu") 
options.add_argument("disable-infobars") 

driver = webdriver.Chrome(chrome_options=options) 
driver.get("http://www.bbc.co.uk/news") 

# take screenshot with a transparent background 
send("Emulation.setDefaultBackgroundColorOverride", {'color': {'r': 0, 'g': 0, 'b': 0, 'a': 0}}) 
driver.get_screenshot_as_file(r"C:\temp\screenshot.png") 
send("Emulation.setDefaultBackgroundColorOverride") # restore 

Answer 2

一個PNG可以有透明的像素，但截圖不能。無論何時渲染某些東西時，都會混合呈現透明度級別的渲染，但合成圖層總是會有背景。

屏幕截圖是屏幕上呈現的內容，它永遠不會透明。如何在桌面上顯示真實的透明圖像？你不能因爲桌面或其他東西的背景總是必須在那裏。

所以你所要求的與Chrome，ChromeDriver無關。任何截圖採取工具不能採取透明的截圖，沒有你告訴它掩蓋什麼。

即使像Photoshop這樣的工具使用特殊的方式（灰度顏色框有小的變化）來顯示透明背景，但如果你使用屏幕截圖工具來捕捉該圖像，結果將是一個具有實際像素和像下面一樣的透明度的圖像