用图片中的主色更改背景颜色

时间：2013-04-05 作者：Apteryx

我正在寻找一种聪明的方法来更改页面的背景色，但要从标题图片的主色中提取#xxxxxx值。

在二十一主题中，我可以为每个加载的页面设置一个随机图像，我会更改背景颜色以匹配图片。

我知道这是可能的，但我不知道如何修改CSS或模板以获取特定函数的值（我发现这似乎很有希望：

https://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript

这太复杂了吗？

非常感谢

1 个回复

SO网友:gdaniel

您可以使用一个名为Color Thief.

Files needed:

github page)github page)

Wordpress setup:

打开functions.php （位于主题文件夹中）并添加下面的代码以在WordPress中加载文件。在本例中，我将所有文件都放在“js”文件夹中。

//color thief demo

wp_register_script(\'quantize\', $base . \'/js/quantize.js\');
wp_enqueue_script(\'quantize\');

wp_register_script(\'colorThief\', $base . \'/js/color-thief.js\');
wp_enqueue_script(\'colorThief\');

wp_register_script(\'main\', $base . \'/js/main.js\');
wp_enqueue_script(\'main\');

如你所见，我还创建了main.js 文件来存储将运行颜色盗贼代码的代码。

main.js code:

jQuery(document).ready(function($) {

    $("#target").load(function(){

        // Dominant Color
        var dominantColor = getDominantColor($(this));

        //change background
        $("body").css("background-color", "rgb("+dominantColor+")");
    });        
});

上面的代码将查找具有id = target.
Theload() 函数将确保在执行代码之前已加载图像。

接下来，主色的值存储在一个变量中（返回的值是3个数字，形成RGB颜色）

我们使用相同的变量来更改背景的颜色。

The HTML setup:

TwentyEleven主题通过文件中的函数加载图像header.php, 但您仍然可以编辑图像标记并添加图像ID，以便使用jQuery轻松找到它。

在这种情况下，我的图像ID是target:

<img 
    src="<?php header_image(); ?>" 
    width="<?php echo HEADER_IMAGE_WIDTH; ?>" 
    height="<?php echo HEADER_IMAGE_HEIGHT; ?>" 
    alt="" 
    id="target" />

这应该可以做到。页面加载后，jQuery脚本将查找具有id = target. 获取该图像的主色，然后将其自动应用于页面背景。

您可以看到这项工作的演示here. （刷新页面几次，直到加载不同的图像）

结束

标签： custom-background color-picker 小码农

小码农CODE

用图片中的主色更改背景颜色

相关推荐