jQuery提取图像的主色

所属分类:UI-背景

 43934  420  查看评论 (2)
分享到微信朋友圈
X
jQuery提取图像的主色 ie兼容9

一个简单的jQuery插件来提取图像的主色,并把它应用到它的父元素的背景。

注!chrome下本地预览会出现跨域问题,上传服务器后不影响!

入门

简单地包括jQuery和脚本在你的页面中,然后运行该脚本,如下所示:

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

该脚本会查找image(s)与data-adaptive-background属性:

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

演示

下面是它的工作原理有点演示。(1)加载页面(2)的图像的占主导地位的背景颜色被提取(3)表示的颜色被应用到图像。

注意事项

这个插件utlizes的<canvas>的元素和的ImageData对象,由于跨站点的安全性限制,如果一个人试图从没有托管在当前域的图像中提取颜色,脚本将失败,除非图像允许跨地资源共享。

在S3上启用CORS

要启用CORS托管在S3存储桶的图像,按照亚马逊指导这里,加入以下的桶的CORS系统配置:

<CORSRule> 
 <AllowedOrigin> * </ AllowedOrigin> 
 <AllowedMethod> GET </ AllowedMethod> 
</ CORSRule>
相关插件-背景

京东产品详细页图片放大效果

京东商城详细页产品图片列表以及放大镜效果 兼容ie6+,谷歌,火狐
  背景
 40491  406

jQuery全屏背景插件Vegas2

网页全屏背景jQuery插件 Vegas2,它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格,如旋转、渐隐、左右等方式,切换的时候还有进度条显示。
  背景
 32671  388

基于canvas的星空效果

基于canvas的星空粒子效果(代码注释全!)
  背景
 56530  306

jQuery颜色选择器ColorPicker

ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。
  背景
 49674  249

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    太阳大大的 0
    2020/4/13 13:32:33
    有没有具体的文档呢?下载下来好几个js文件,不知道引入哪个啊 q 538896933 求指教啊 回复
    SiriBen 0
    2019/7/24 14:12:46
    这个是个不错的东西 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复