ウェブマスターが自分の Twitter フィードにスタイルを追加できるようにするページに取り組んでいます。これらのスタイルのいくつかは、表示に透明度を使用します。彼らが選択できる画像のリストを作成したいと思います。現在、次のようなチェックされた背景でスクリーンショットを撮っています。
しかし、それは私が本当に欲しいものではありません。
HTML要素の画像をキャプチャし、透明性を維持する方法はありますか?
編集: 私はこれを掘り下げているだけなので、HTML5 Canvas や -moz-element などの新しいトピックに出くわしています。-moz-element を使用してキャンバスの背景を html 要素に設定し、キャンバスから画像データを抽出することはできますか? 「それを行ったことがある」人が私を追い出さない限り、私はこれを試すつもりです.
編集: -moz-element と canvas は行き止まりでした。-moz-element はアイテムを背景として設定しますが、背景画像を保存することはできません。また、背景が通常の画像であっても、キャンバスは背景を保存しません。
少し手間がかかりますが、レイアウトしている HTML であれば実行可能です。ダウンロードしたページのマークアップの透明度を回復するには、それらのページを保存してローカルで編集する必要があります。異なる背景色で HTML 要素を複数回レンダリングすることにより、画像エディターを使用して不透明度を取得できます。まともな画像エディターが必要になるでしょう。私は GIMP を使用しています。
保存したい要素を、黒、白、ニュートラル グレーの背景で 3 回レンダリングします (#888)。
スクリーン キャプチャ プログラムを使用して、それらのディスプレイをキャプチャし、まったく同じ領域にトリミングします。
GIMP でこれらの画像をレイヤーとして開き、上から下に黒、白、グレーの順に並べます。
一番上の黒いレイヤーを差分モードに設定します。これにより、黒と白のレイヤーの間にグレースケールの違いが生じます。
最上層をマージします。これにより、2 つのレイヤーが残ります。灰色の背景レイヤーとグレースケールの違い。差分レイヤーの色を反転し、クリップボードにコピーします。
レイヤー マスクを灰色の背景レイヤーに追加し、クリップボードをレイヤー マスクに貼り付けます。
グレースケール レイヤーを削除し、グレーの背景レイヤーにレイヤー マスクを適用します。これにより、元のレイヤーと同様の不透明度を持つレイヤーが 1 つ残るはずです。
不透明度は少しずれていますが、レイヤーを複製してそれ自体とマージすると、大まかな範囲になります.
おそらくピクセルパーフェクトではありませんが、概念実証です。HTML マークアップの不透明度をキャプチャできます。
必要なのは、画面ではなくメモリ内の画像バッファーにレンダリングできる Web ブラウザーです。
私の推測では、すべてのブラウザーがこれを行うことができます (レンダラーの一部である必要があります) が、少なくとも JavaScript からではなく、この機能にアクセスできるブラウザーを認識していません。
WebKit ソースをダウンロードすると、そのようなことを行うテスト ケースがあるはずです :-/
いいえ、スクリーンショットを撮り、個々の視覚要素の透明度を画像内の透明なスポットとして保持できるソフトウェアはありません。これはスクリーンショットの仕組みではないためです。スクリーンショットは WYSIWYG であり、定義上、スクリーンショット内のすべての要素は常に透明でない背景があります。
ここでの最善の策は、透明度を通常どおり制御できる画像として目的の部分を再作成することだと思います。これは最善の解決策ではありませんが、同じ種類のものでこれを頻繁に行う場合は、スクリーンショットをトリミング/編集するよりもはるかに高速になります.