Lambdaカクテル

京都在住Webエンジニアの日記です

Invite link for Scalaわいわいランド

Chromium(Chrome)で透過背景スクリーンショットを撮る

zmmの開発で、背景として動画を使いたいというリクエストがあった。よく考えるとffmpegで最終的に合成しているのだから動画でも合成はできなくもなさそう。いったんchromiumが吐き出すレンダー画像を透過にして、あとから動画と合成すればよいのだ。

というわけでChromoumで透過pngをスクショできるか試してみたところ、あっさり成功したのでメモ。

以下のようなHTMLファイルを作成する。

<html>
<body>
    hello
</body>
</html>

そいで、次のようなコマンドでスクショを撮る。

chromium --headless --screenshot --window-size=256,256 --default-background-color=00000000 transparent.html

default-background-colorの設定によって背景が透過されるっぽい。00000000はすなわち#00000000のことを表現しているようだ。

何かと便利に使えそうなオプションなので、活用したいところ。

ChromiumのバージョンはChromium 110.0.5481.100 stableで実験した。

★記事をRTしてもらえると喜びます
Webアプリケーション開発関連の記事を投稿しています.読者になってみませんか?