CSS を解析して画像のテーマカラー機能を抽出する (ヒント)

背景

すべては、WeChat 技術グループのクラスメートが「写真の主な色を取得する方法はあるか」と尋ねたことから始まりました。写真があります。そのメインカラーを取得します。

取得した色の値を使用して、次のような関数を実装します。コンテナー内に画像があり、背景色を画像の主な色と一致させたい場合、次のようになります。

全員が提案してくれました。計算には Canvas を使うことを提案する人もいれば、専用のオープンソースライブラリを推奨する人もいました。どちらも良かったです。

では、この機能は CSS を使用して実現できるのでしょうか?

夢物語のようです。CSS でこの効果を実現できるのでしょうか?えーと、CSS を使うと、確かに画像のおおよそのメインカラーを満足のいく形で得ることができます。メインカラーの要件が特に厳密でない場合は、これは良い方法です。一緒に見ていきましょう。

画像のテーマカラーを取得するには、filter: blur() と transform: sacle() を使用します。

ここでは、ぼかしフィルターと拡大効果を使用して、画像のテーマカラーを大まかに取得します。

次のような画像があるとします。

<div></div>

画像にぼかしフィルターを適用します。

div {
    背景: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    背景サイズ: カバー;
    フィルター: ぼかし(50px);
}

効果を見てみましょう。比較的大きなぼかしフィルターを使用して、 blur(50px) 。ぼかした画像はそれっぽい感じがしますが、ぼやけたエッジがいくつかあります。 overflowを使用してトリミングしてみてください。

次に、ぼやけたエッジを削除し、 transform: scale()で効果を増幅して、色に再び焦点を当てる必要があります。コードを少し変更します。

div {
    位置: 相対的;
    幅: 320ピクセル;
    高さ: 200px;
    オーバーフロー: 非表示;
}

div::before {
    コンテンツ： "";
    位置: 絶対;
    上: 0;
    左: 0;
    右: 0;
    下部: 0;
    背景: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    背景サイズ: カバー;
    // コアコード:
    フィルター: ぼかし(50px);
    変換: スケール(3);
}

結果は次のとおりです。

このように、CSS を使用して画像の主な色を取得すると、効果はかなり良好になります。

完全なコードはここにあります: CodePen デモ - フィルターとスケールで画像の主な色を取得します

デメリット

もちろん、この解決策にもいくつか小さな問題があります。

画像の主な色は大まかにしか取得できず、あまり正確ではありません。また、 filter: blur(50px) 50pxデバッグが必要です。blur フィルター自体がパフォーマンスを消費します。ページにこの方法で取得した複数の背景がある場合、パフォーマンスに一定の影響を与える可能性があります。実際に使用する場合は、一定のトレードオフを行う必要があります。

やっと

さて、今回の記事はここまでです。CSSを使って画像のテーマカラーを取得する裏技を紹介しました。参考になれば幸いです😃

この方法を提案してくれたYuewenの学生、XboxYanに感謝します。iCSS WeChatグループは非常に活発で、CSSの専門家が集まっています。技術について議論するためにグループに参加したい学生は、私のWeChat coco1sを追加できます（グループには200人以上がいるので、グループに参加するためにコードをスキャンすることはできません。招待することしかできません）

素晴らしい CSS 技術記事が私の Github -- iCSS に集められています。これらは継続的に更新されています。星をクリックして購読し、収集してください。

CSS を解析して画像のテーマカラーを抽出する方法についてはこれで終わりです。CSS による画像のテーマカラーの抽出についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTMLでカメラを読み込む方法

>>: Web ページでの Unicode 文字の使用の概要 (&#、\u など)