Transparent PNG screenshots
Reported by
evan.m.r...@gmail.com,
Feb 7 2017
|
|||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3004.3 Safari/537.36 Steps to reproduce the problem: 1. Run headless chrome on debian:stable-slim, or simply Chrome Canary on OSX 2. Connect with chrome-remote-interface 3. Create a new tab and load an SVG image into it 4. Take a screenshot using Page.captureScreenshot() What is the expected behavior? The resulting PNG buffer should have a transparent background What went wrong? The resulting PNG has a white background, even if the html and body tags have transparent backgrounds assigned through CSS. Did this work before? No Chrome version: 58.0.3004.3 Channel: canary OS Version: OS X 10.12.2 Flash Version: Shockwave Flash 25.0 r0 Workflow is replacing PhantomJS to turn a SVG into a PNG. The intended host is headless chrome on a docker image with debian:stable-slim base. For speed I tested this on Chrome Canary OSX as well.
,
Feb 7 2017
,
Feb 7 2017
,
Feb 7 2017
,
Feb 9 2017
We now have a DevTools command to set the default background color. At the moment, this doesn't work for transparent colors yet, b/c some layer below the RenderView seems to enforce a white base background.
,
Feb 20 2017
,
Feb 22 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6b9bfb533a084798aaccb0de0dc3575c377dbc34 commit 6b9bfb533a084798aaccb0de0dc3575c377dbc34 Author: eseckler <eseckler@chromium.org> Date: Wed Feb 22 12:12:02 2017 [devtools] Allow transparent base background color overrides. BUG= 689349 Review-Url: https://codereview.chromium.org/2704213002 Cr-Commit-Position: refs/heads/master@{#452008} [modify] https://crrev.com/6b9bfb533a084798aaccb0de0dc3575c377dbc34/third_party/WebKit/Source/web/InspectorEmulationAgent.cpp [modify] https://crrev.com/6b9bfb533a084798aaccb0de0dc3575c377dbc34/third_party/WebKit/Source/web/WebViewImpl.cpp [modify] https://crrev.com/6b9bfb533a084798aaccb0de0dc3575c377dbc34/third_party/WebKit/Source/web/WebViewImpl.h
,
Feb 22 2017
Above patch enables using Emulation.setDefaultBackgroundColor with a transparent background color. Note that there's still an issue with semi-transparent backgrounds and changing back from a once overridden transparent background, see https://codereview.chromium.org/2702153003/.
,
Mar 31 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e commit f2bd55f7d81eae9cd0736aaf68879ceb0309c92e Author: eseckler <eseckler@chromium.org> Date: Fri Mar 31 09:11:57 2017 [blink] Support (semi-)transparent background colors in WebView/Frame. We allow controlling the WebViewImpl's background and base background color via DevTools, whose users may set the background color to a transparent or semi-transparent color. For correct application of this color, the LayerTree's has_transparent_background should be updated accordingly. BUG= 689349 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Review-Url: https://codereview.chromium.org/2715243004 Cr-Commit-Position: refs/heads/master@{#461084} [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/content/renderer/gpu/render_widget_compositor.cc [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/content/renderer/gpu/render_widget_compositor.h [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/content/renderer/render_view_impl.cc [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/core/frame/FrameView.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/core/frame/FrameView.h [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/core/frame/LocalFrame.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/core/frame/LocalFrame.h [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/core/layout/LayoutTestHelper.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/core/paint/ViewPainter.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/core/svg/graphics/SVGImage.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/platform/testing/WebLayerTreeViewImplForTesting.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/platform/testing/WebLayerTreeViewImplForTesting.h [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/DevToolsEmulator.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/FullscreenController.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/FullscreenController.h [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/InspectorOverlay.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/WebFrameWidgetImpl.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/WebFrameWidgetImpl.h [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/WebLocalFrameImpl.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/WebPagePopupImpl.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/WebViewFrameWidget.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/WebViewFrameWidget.h [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/WebViewImpl.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/WebViewImpl.h [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/tests/WebFrameTest.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/Source/web/tests/WebViewTest.cpp [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/public/platform/WebLayerTreeView.h [modify] https://crrev.com/f2bd55f7d81eae9cd0736aaf68879ceb0309c92e/third_party/WebKit/public/web/WebFrameWidget.h
,
Apr 7 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/2b39ff29fd0735b45f37cd0f2d4997847695aecf commit 2b39ff29fd0735b45f37cd0f2d4997847695aecf Author: eseckler <eseckler@chromium.org> Date: Fri Apr 07 09:26:55 2017 [content] Fix background color update handling in RWHVAura. RenderWidgetHostViewAura uses the background color provided in the CompositorFrame to update its own background color. This update should not result in telling the RenderView to turn its background transparent. BUG= 689349 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_site_isolation Review-Url: https://codereview.chromium.org/2702153003 Cr-Commit-Position: refs/heads/master@{#462819} [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/frame_host/render_widget_host_view_child_frame.cc [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/frame_host/render_widget_host_view_child_frame.h [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/renderer_host/render_widget_host_unittest.cc [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/renderer_host/render_widget_host_view_android.cc [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/renderer_host/render_widget_host_view_android.h [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/renderer_host/render_widget_host_view_aura.cc [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/renderer_host/render_widget_host_view_aura.h [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/renderer_host/render_widget_host_view_base.cc [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/renderer_host/render_widget_host_view_base.h [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/renderer_host/render_widget_host_view_mac.h [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/renderer_host/render_widget_host_view_mac.mm [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/browser/renderer_host/render_widget_host_view_mac_unittest.mm [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/public/browser/render_widget_host_view.h [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/test/test_render_view_host.cc [modify] https://crrev.com/2b39ff29fd0735b45f37cd0f2d4997847695aecf/content/test/test_render_view_host.h
,
Apr 7 2017
Thank you for working on this issue! Will there be a command-line argument "--background-color=..." to accompany "--screenshot"? I'd find that very useful when converting an SVG to a transparent PNG.
,
Apr 8 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/d374c7111b60395ad0a715f5e1c0ddbb41c802af commit d374c7111b60395ad0a715f5e1c0ddbb41c802af Author: eseckler <eseckler@chromium.org> Date: Sat Apr 08 07:04:58 2017 [blink] Use early returns in baseBackgroundColor(Override) setters. The patch adds early outs for set/clearBaseBackgroundColorOverride and FrameView::setBaseBackgroundColor to avoid unnecessary updates. It also adds a missing lifecycle update to the setters in WebFrameWidgetImpl, which may otherwise lead to crashes in isAllowedToQueryCompositingState(). BUG= 689349 Review-Url: https://codereview.chromium.org/2804983003 Cr-Commit-Position: refs/heads/master@{#463127} [modify] https://crrev.com/d374c7111b60395ad0a715f5e1c0ddbb41c802af/third_party/WebKit/Source/core/frame/FrameView.cpp [modify] https://crrev.com/d374c7111b60395ad0a715f5e1c0ddbb41c802af/third_party/WebKit/Source/web/WebFrameWidgetImpl.cpp [modify] https://crrev.com/d374c7111b60395ad0a715f5e1c0ddbb41c802af/third_party/WebKit/Source/web/WebViewImpl.cpp
,
Apr 12 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e9ea97fc860799cbacaf65a32d5d87276b5409dd commit e9ea97fc860799cbacaf65a32d5d87276b5409dd Author: eseckler <eseckler@chromium.org> Date: Wed Apr 12 08:17:17 2017 [devtools] Add test for transparent background color override. Added a test, now that blink now supports transparent overrides correctly. It couldn't be a layout test since layout test reference images are not transparent. BUG= 689349 Review-Url: https://codereview.chromium.org/2811593007 Cr-Commit-Position: refs/heads/master@{#463959} [modify] https://crrev.com/e9ea97fc860799cbacaf65a32d5d87276b5409dd/content/browser/devtools/protocol/devtools_protocol_browsertest.cc
,
Apr 12 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/2c66e2634d348919f2f25954448ce162210140ad commit 2c66e2634d348919f2f25954448ce162210140ad Author: eseckler <eseckler@chromium.org> Date: Wed Apr 12 09:17:30 2017 [headless] Add command line flag for default background color. Can be set to 0 to render with transparent background. BUG= 689349 Review-Url: https://codereview.chromium.org/2814043002 Cr-Commit-Position: refs/heads/master@{#463974} [modify] https://crrev.com/2c66e2634d348919f2f25954448ce162210140ad/headless/app/headless_shell.cc [modify] https://crrev.com/2c66e2634d348919f2f25954448ce162210140ad/headless/app/headless_shell_switches.cc [modify] https://crrev.com/2c66e2634d348919f2f25954448ce162210140ad/headless/app/headless_shell_switches.h
,
Apr 12 2017
#11: The patch above adds --default-background-color=... :) The color value should be provided as 32-bit RGBA hex.
,
Apr 13 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/9f00423812b73080001e1742d6ad356c68c23b62 commit 9f00423812b73080001e1742d6ad356c68c23b62 Author: eseckler <eseckler@chromium.org> Date: Thu Apr 13 07:46:49 2017 [devtools] Remove device emulation background color override. If used in combination with a transparent setDefaultBackgroundColor, the background color override applied by setDeviceMetricsOverride is harmful. The background override does not seem to be beneficial anymore, as the frontend already doesn't use it. BUG= 689349 Review-Url: https://codereview.chromium.org/2808123004 Cr-Commit-Position: refs/heads/master@{#464335} [modify] https://crrev.com/9f00423812b73080001e1742d6ad356c68c23b62/content/browser/devtools/protocol/devtools_protocol_browsertest.cc [modify] https://crrev.com/9f00423812b73080001e1742d6ad356c68c23b62/content/renderer/devtools/render_widget_screen_metrics_emulator.cc [modify] https://crrev.com/9f00423812b73080001e1742d6ad356c68c23b62/third_party/WebKit/Source/web/DevToolsEmulator.cpp
,
Apr 13 2017
And with that latest patch, there's nothing left to do here! :) Feel free to reopen if you notice any problems.
,
Apr 13 2017
The argument --default-background-color=0 works for me, thank you!
,
May 3 2017
I'm unable to use --default-background-color=0 & --remote-debugging-port= I Get this error: [0503/204446.339223:ERROR:headless_shell.cc(480)] Setting default background color is disabled when remote debugging is enabled. Can you send the command that you're using to start chrome? Thanks!
,
May 5 2017
#19: If you use --remote-debugging-port, you'll have to set the color override yourself via your devtools client, using the DevTools command below. (The headless_shell can't do it for you, since there's only one simultaneous DevTools client connecion allowed.) https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setDefaultBackgroundColorOverride
,
May 11 2017
That worked, Thanks!
,
Jul 12 2017
Hi #19 and #20, I'm trying to figure out how to make a transparent screenshot using remote debugging but I can't figure it out how to make it works. I'm starting chrome with: google-chrome --hide-scrollbars --remote-debugging-port=9222 --disable-gpu Attached is the Node script used to make the screenshot. I didn't test with another language for now. Could you help me figuring what I'm doing wrong please?
,
Jul 12 2017
#22: Are you running headless mode? Also, your page (test.html) may have a background set. If you set "background-color: transparent" in the body's style, it should work. If this doesn't help, please file another bug or ask for help on the headless-dev mailing list.
,
Oct 2 2017
This doesn't work for me anymore with Chrome 61 on macOS. I'm using the following command line: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --screenshot --window-size=256,256 --default-background-color=0 file://$PWD/test.svg It used to render svg with transparent background, but now it renders it with black background. I tried to use --default-background-color=00000000 I tried to render just simple HTML with transparent body, there's no way to get transparent PNG as output. If I set --default-background-color=ff0000ff, it uses red background, so setting work, just not for transparent value. Also Chrome doesn't respect --window-size if DPI is different from 1. For example if I'm using --window-size=256,256 running it on retina Macbook, result is 512x512 (so it's impossible to render non-even resolution). I worked around it using external non-retina display, but it isn't ideal.
,
Oct 2 2017
#24: Please file separate bugs for these issues here: https://bugs.chromium.org/p/chromium/issues/entry?components=Internals>Headless,Platform>DevTools Thanks! :) |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by evan.m.r...@gmail.com
, Feb 7 2017