jQuery提取图像的主色

最新推荐文章于 2024-07-24 14:26:48 发布

WebCsDn_TDCode

最新推荐文章于 2024-07-24 14:26:48 发布

阅读量1.6k

点赞数

分类专栏：图片前端

本文链接：https://blog.csdn.net/qq_42396791/article/details/83382671

版权

前端同时被 2 个专栏收录

70 篇文章 0 订阅

订阅专栏

图片

4 篇文章 0 订阅

订阅专栏

图片主题色在图片所占比例较大的页面中，能够配合图片起到很好视觉效果，给人一种和谐、一致的感觉。同时也可用在图像分类，搜索识别等方面。通常主题色的提取都是在后端完成的，前端将需要处理的图片以链接或id的形式提供给后端，后端通过运行相应的算法来提取出主题色后，再返回相应的结果。

但是过程麻烦所以今天分享个插件直接获取

需要插件：

1.jquery.js v1.10.2（高版本会报错）

2.jquery.adaptive-backgrounds.js

3.waypoints.min.js


$(document).ready(function(){
    // Make some selections.
    var $window       = $(window);
    var $imgWrapper   = $('.image-wrapper');
    var $imgs         = $imgWrapper.find("img");
    var $logoBoxes    = $('.logo .box');
    var $title        = $('h1');

    $imgs.on('ab-color-found', function(e, data){
    	console.log(data.color)
      $('.swatch').text(data.color)
    });

    // Run the A.B. plugin.
    $.adaptiveBackground.run({ parent: '1' });

    $imgWrapper.waypoint(function(direction) {

      if ( $(this).attr('data-colored') )
        return;

      $(this).css({ background: $(this).attr('data-color') })
             .attr('data-colored', 1);

    }, { 
      offset: '65%'
    })

})

HTML

<!DOCTYPE html>

<html>

<head>

  <title>Demo</title>

<link rel="stylesheet" href="styles.css" />

  <script src="jquery.js"></script>

  <script type="text/javascript" src='jquery.adaptive-backgrounds.js'></script>

  <script type="text/javascript" src='waypoints.min.js'></script>

   <script type="text/javascript" src='main.js'></script>
 
  

</head>

<body>


  <div class='image-wrapper slow'>

  <div class='inner'>

    <span class='color'>

      <span class='swatch'></span>

    </span>

    <img src="images/1.jpg" data-adaptive-background='1' data-description='grandpa'>

  </div>

</div>




</body>

</html>

效果