这篇文章发布于 2014年08月12日,星期二,18:31,归类于 JS实例。 阅读 94837 次, 今日 5 次 32 条评论
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=4296
一、我想写一篇长篇小说
我想写一篇长篇小说,每天上下班地铁的几个小时写写。不过还没完全构思好。据说,人在实现伟大的计划之前最好不要跟别人讲,等大米差不多煮熟的时候,再普照四方。但是呢,一直憋在心里也慌得很,实在忍不住了,这里一吐为快,反正是个小嘎吱角的地方,吐个火星(星星之火)没人发现的,(*^__^*) 嘻嘻……
我琢磨着,每周写一段,像周刊一样,写个10年,恩,差不多了。说不定会火,哈哈!!
补充于2018-01-31
如果要取多个颜色,推荐使用color-thief:https://github.com/lokesh/color-thief
二、rgbaster.js小介绍
rgbaster.js
是段小脚本,可以获得(具有访问权限的)图片的主色,次色等,然后,发挥我们的创意,实现一些精彩的Web交互效果。
rgbaster.js
的Github项目地址是:https://github.com/briangonzalez/rgbaster.js
如何使用?
如何让妹子为你下厨?首先,你得有一个厨房。同样的,要使用rgbaster.js
,首先,你得先调用之:
<script src="http://rawgit.com/briangonzalez/rgbaster.js/master/rgbaster.js"></script>
然后,你得有个菜谱,知道该如何对妹子下手:
var img = document.getElementById('image'); // 或者 var img = 'http://example.com/path-to-image.jpg' RGBaster.colors(img, { success: function(payload) { // payload.dominant是主色,RGB形式表示 // payload.secondary是次色,RGB形式表示 // payload.palette是调色板,含多个主要颜色,数组 console.log(payload.dominant); console.log(payload.secondary); console.log(payload.palette); } });
看来,这个妹子很好下手啊!
就一个方法,RGBaster.colors
就可以了,第1个参数img
可以是图片DOM也可以是图片的URL地址。后面就是可选参数,说到可选参数,不只success
这一个,还有下面这几位兄弟:
RGBaster.colors(img, { paletteSize: 30, // 调色板大小 exclude: [ 'rgb(255,255,255)' ], // 不包括白色 success: function(payload){ // 包含一些颜色信息(payload)的回调 } })
paletteSize
为30
, 则payload.palette
就是个包含前30
主要颜色值的数组。
exclude
表示数组中的颜色不参与,剔除。例如,一个小龙女舞剑的图片,我们可能需要的是其舞剑的背景。但是,由于小龙女长年古墓,缺少阳光,面色白皙,加上总是一袭白衣,这大大的白色虽是主色,但却我们想要的,于是需要剔除。
success
就是我们下厨的主要内容了,回调中的payload
参数,包含,主色、次色以及调色板信息,绝对可以满足我们绝大多数的需求。
三、rgbaster.js小使用
下面看看妹子是如何下厨的。
您可以狠狠地点击这里:rgbaster.js与slide图片背景变变变demo
点击下面的四个圆点按钮走起:
可以看到,图片slide的同时,容器的背景色也随着一起改变,而容器的背景色就是美女图片的主色。
截个图让大家感受下:
相关JS代码为:
$("#index a").powerSwitch({ animation: "translate", classAdd: "active", onSwitch: function(target) { RGBaster.colors(target.find("img").get(0), { exclude: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ], success: function(payload) { // 容器的背景色变成图片的主色 - payload.dominant $("#box").css("background-color", payload.dominant); } }); } }).eq(0).trigger("click");
powerSwitch
为自己的万能切换插件中的方法,onSwitch
是slide切换的回调,回调执行的就是rgbaster.js
的RGBaster.colors
方法,不考虑黑白两色,让box
的背景色变成图片的主色,哈,很简单吧~
四、rgbaster.js的使用限制
1. 浏览器支持
由于使用Canvas的getImageData
获得图片颜色信息(我之前的box-shadow图片生成工具也是用的这个), 因此,需要IE9+浏览器支持;同时,使用了XMLHttpRequest2.0, 貌似要IE10+可以畅快使用(据说IE8/IE9可以使用XDomainRequest
对象实现类似功能,未研究,具体不详);
2. 跨域限制
XMLHttpRequest2.0获得图片数据,本地数据自然无障碍,对于跨域的数据,需要设置。宗旨就是,控制Access-Control-Allow-Origin
,例如,你希望你站点的图片只有我站点可以访问,则想办法通过设置,使得请求信息中包含:
Access-Control-Allow-Origin: http://www.zhangxinxu.com
如果是所有站点,则:
Access-Control-Allow-Origin: *
不同的服务器设置是不一样的,大家自行百之谷之。
五、我想写一篇长篇小说
//zxx: 接开头。
面向的群体是,应该是同龄人。走搞笑风格还是严肃风格,应该带有搞笑,主旨但高大上。最好带点热血。恩~~
还有就是………………哎呀呀,好像很难的样子……按照这个节奏,估计还要再构思个半年~~
在此之前,还是多盘出点技术文章吧。
以上~~
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:http://www.zhangxinxu.com/wordpress/?p=4296
(本篇完)
- 理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型 (0.421)
- XMLHttpRequest实现HTTP协议下文件上传断点续传 (0.421)
- CORS ajax跨域请求php简单完整案例一则 (0.421)
- 使用navigator.connection.downlink前端测网速 (0.421)
- 使用AbortController abort中断原生fetch或axios请求 (0.421)
- 使用CSS将图片转换成模糊(毛玻璃)效果 (0.327)
- CSS3 box-shadow盒阴影图形生成技术 (0.327)
- canvas实现任意字符图形的打点或连线动画 (0.327)
- 瞎折腾:把JS,CSS任意文本文件加密成一张图片 (0.327)
- 解决canvas图片getImageData,toDataURL跨域问题 (0.327)
- 腾讯开源的酷炫动画播放解决方案Vap初体验 (RANDOM - 0.047)
试了三个浏览器chrome,UC, IE11。同一张图片,用color-thief 识别的颜色都不一致。r g b 有一些相差。是不是浏览器厂商CONVAS实现的方式不一样引起的吗?
老哥,我直接引用rgbaster.js,图片在本地,为什么会报rgbaster.js的src找不到这个错误,求帮忙理解一下,谢谢
一张200多K的数据,rgba那个数组大约2W的长度,然后对这个数据每隔四个进行合并,形成新数组,然后进行聚类,排序。思路是看明白了,自己也动手写了一个版本。还是有一些问题去解决:
1.相似颜色值合并:rgba(234,234,234,1)和rgba(234,235,235,1) 类似的这种是否有必要合并成为一个值,这里又会涉及到相似度计算等问题。
2.聚类算法优化:性能更进一步
3.大图片的处理:缩放
感谢大神。。。就是反映有一点点慢,不过还是很感谢大神,写的很风趣
主色调取色不准,不是按照颜色分布宽广取色的吗
不错,如上楼这些所说,你是小叮当,经觉常找到一些实用的小东西给我们用,哈哈
总是能在大神这找到解决办法,现实版的小叮当
求解,在使用的时候 进行渲染的瞬间 会有卡顿现象
因为有大量的计算,如果图片尺寸大会这样,建议使用缩略小图处理,结果都是一样的~
访问网络图片 还是现实跨域问题 希望给出解决方案 网络图片的服务器已经设置了 Access-Control-Allow-Origin: *
绝对的666!!!!
大神就是大神
大师,demo里面的powerSwitch名称好像不对,好像并没有jquery-powerSwitch-min.js这个文件
没成功!
nice
随便逛一逛
小说前排马一个,走你的风格就会很有趣,到时请地址之~
我想钓一个5斤翘嘴···
本地上传的图片取不到颜色
期待小说,10年太久有木有,短点的吧,出时请标上大名好找
我是来看长篇小说的
等待师兄的小说。
感谢分享
等看小说,最近刚看了古龙的几本
谢谢大神啊,好东西啊
没有哪里需要跨域吧?
很早就有这方面应用了,color-thief也值得一试。
可以获得的数据更多
http://lokeshdhakar.com/projects/color-thief/
你们说的都不能低版本的兼容ie啊,你们看下天猫首页轮播!
好思路,有想法
很不错,用在一些地方会有不俗的效果。
终于不用张含韵的图片了
demo里第一个图片还是张含韵
期待小说:)
写的这风趣,搞的我都没兴趣看技术内容了