阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.adaptive backgrounds 中文API文档

      插件 jQuery.adaptive backgrounds 中文API文档

      一个jQuery插件,用于从图像中提取主色并将颜色应用于父级。

      只需在页面中包含jQuery和脚本,并像这样调用它:

      $(document).ready(function(){
        $.adaptiveBackground.run();
      });
      

      该脚本查找具有以下data-adaptive-background属性的图像:

      <img src="/image.jpg" data-adaptive-background>
      

      使用带有CSS背景图像的元素

      < img>AB不支持使用嵌套在父元素内部的元素,而是支持抓取独立元素的背景图像的主色,然后应用相应的主色作为所述元素的背景色。

      通过向data-ab-css-background元素添加数据属性来启用此功能。请参阅以下示例:

      <div style='background-image: url(/some-image.jpg)' data-adaptive-background data-ab-css-background></div>
      

      演示

      这是一个关于它如何工作的小演示。(1)页面加载(2)提取图像的主要背景颜色(3)将所述颜色应用于图像的父级。演示大幅减速以显示效果。

      API

      这个插件公开了一种方法:

      • $.adaptiveBackground.run(opts) arg: opts (Object) an optional argument to be merged in with the defaults.

      默认选项

      • 选择字符串(默认值:‘img[ data-adaptive-background=“1”]') CSS选择它表示哪些图像抓取/过程。理想情况下,此选择器将以img开头,以确保我们只抓取并尝试处理实际图像。
      • 父 falsy (默认值:null) CSS选择其表示该父应用背景颜色。默认情况下,颜色应用于DOM树上的父级。
      • normalizeTextColor布尔(默认:false)选项正常化父文字的颜色,如果背景颜色太暗或太亮。
      • normalizedTextColors对象常量(默认值:{dark: ‘#000’, light: ‘#fff’})当背景是要么过于黑暗/光照使用的文本的颜色。
      • shadeVariation blend|true|false(默认)选项用于遮蔽父级的颜色或更暗(参见shadePercentage)或将父级的颜色与另一种颜色混合一定百分比(请参阅shadeColors)。
      • shadePercentage float(默认值:)0设置使用的着色或混合的百分比。可以在-1.00到1.00之间调整。
      • shadeColors Object Literal(默认值:){light:‘rgb(255,255,255)',dark:‘rgb(0,0,0)'}设置将用于混合背景颜色的颜色。提供两个值以说明背景颜色为浅色或深色开始。
      • 透明 透明主色。可以从0.01调整到0.99。

      示例: 调用run方法,传入您要覆盖的任何选项。

      var defaults      = {
        selector:             '[data-adaptive-background="1"]',
        parent:               null,
        exclude:              [ 'rgb(0,0,0)', 'rgba(255,255,255)' ],
        shadeVariation:   false,
        shadePercentage:  0,
        shadeColors:  {
          light:      'rgb(255,255,255)',
          dark:       'rgb(0,0,0)' 
        },
        normalizeTextColor:   false,
        normalizedTextColors:  {
          light:      "#fff",
          dark:       "#000"
        },
        lumaClasses:  {
          light:      "ab-light",
          dark:       "ab-dark"
        },
        transparent: null
      };
      $.adaptiveBackground.run(defaults)
      

      发生的事件

      • ab-color-found 事件当找到图像的主色时,将触发此事件。有效载荷包括主色以及图像中包含的调色板。

      示例: 绑定到ab-color-found事件,如下所示:

      $('img.my-image').on('ab-color-found', function(ev,payload){
        console.log(payload.color);   // The dominant color in the image.
        console.log(payload.palette); // The color palette found in the image.
        console.log(ev);   // The jQuery.Event object
      });
      

      成功回调

      您可能希望提供一个回调函数,该函数在执行魔术后调用。

      $.adaptiveBackground.run({
        success: function($img, data) {
          console.log('Success!', $img, data);
        }
      });
      

      请注意,每个图像都会调用一次此回调。

      注意事项

      此插件使用< canvas>元素和ImageData对象,并且由于跨站点安全性限制,如果尝试从未在当前域上托管的图像中提取颜色,则脚本将失败,除非图像允许跨源资源共享。

      在S3上启用CORS

      要为S3存储桶上托管的映像启用CORS,请按照此处的Amazon指南进行操作; 将以下内容添加到存储桶的CORS配置中:

      <CORSRule>
       <AllowedOrigin>*</AllowedOrigin>
       <AllowedMethod>GET</AllowedMethod>
      </CORSRule>
      

      对于所有图像,您还可以选择在图像中包含跨源属性。这不是绝对必要的,因为anonymous原始版本是在Javascript代码中设置的,但是作为超级开发人员,您会感到荣幸。

      <img src="/image.jpg" data-adaptive-background cross-origin="anonymous"/>
      
      目录
      目录