首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS获取图片中随机一点颜色

实现效果 昨天泽泽分享了一篇有意思的文章:纯CSS根据图片取色设置背景色,主要分享了一个就是div嵌套img的时候,如何实现div的颜色为img中一点的颜色。...如下图所示,在PS中打开一张图片,如果将这张图片一直放大,具体到每个像素点,会发现图片单个像素点内的颜色值都是唯一的。....board-item下面的文字部分背景色都是上面图片中的一点的颜色。...实现效果 有了具体的思路了就是如何实现了,因为我这个页面是前后端渲染的动态页面,改PHP代码的话有点麻烦,所以我就考虑从前端入手,使用JQuery来实现: 获取每一个友链链接.board-item; 然后通过显示迭代获取每一个友链中的背景图...; 然后将下方文字的背景图设置为获取的背景图地址,同时,使用Math.random()产生一个随机数,这样的话就可以实现对图片中随机一点进行取色,且每次刷新都会产生不一样的效果。

3.8K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js 水平轮播和透明度轮播的实现

    透明度轮播 主要思路:透明度轮播相对水平轮播的实现更简单一点。...首先在HTML里建一个绝对定位的div盒子,然后在这个div盒子里用列表的方式插入四张图片,设置为绝对定位,并且块排列;接着在js中实现动态效果,透明轮播的实现就是将前一张图片的透明度设置为0,需要轮播的那一张图片的透明度设置为...1,在js的对象中实现,最后实现手动点击轮播,子弹轮播,自动轮播。...将第一张图片获取,放在最后一张的后面,将最后一张图片获取放在第一张图片前面,生成了新的图片列表,当运动到最后一张图片(实际上是第一张)时,下一张要出现的图片直接是第二张图片;当运动到第一张图片(实际上是最后一张...其他的实现方法基本和透明度轮播类似,但是轮播是改变的是距离left 轮播也应用了封装的animate 水平轮播实现代码 <!

    12.5K10

    FlashFlex学习笔记(21):利用colorTransform改变对象的颜色及透明度

    transform是flash.Display.DisplayObject的属性之一,而colorTransform又是transform的属性,这也就意味着几乎所有对象都可以使用colorTransform...属性 这是官方的解释: 当 ColorTransform 对象应用于显示对象时,将按如下方法为每个颜色通道计算新值: 新红色值 = (旧红色值 * redMultiplier) + redOffset...blueOffset 新 Alpha 值 = (旧 Alpha 值 * alphaMultiplier) + alphaOffset (注:本人测试下来,好象这一行公式没啥作用) 如果计算后任何一个颜色通道值大于...用这个东西可以改变几乎任何对象的R,G,B颜色分量以及透明度,说得通俗点:可以把红车换成绿车,或者把黑脸变白脸.下面是示例代码: txtRedMultiplier.addEventListener(Event.CHANGE...RGB.transform.colorTransform = img.transform.colorTransform = color; } ChangeHandler(null); stop(); 从该示例中也可以看出,如果要消除一张图片颜色中的红色分量

    1K70

    Python教程:如何获取颜色的RGB值

    简介 在许多计算机图形和图像处理应用中,颜色的RGB值是至关重要的信息。Python作为一种多功能的编程语言,提供了丰富的工具和库,可以轻松地获取颜色的RGB值。...本文将介绍如何使用Python获取颜色的RGB值,以及一些实际应用的示例。...使用PIL工具获取颜色的RGB值 PIL(Python Imaging Library)是Python中用于图像处理的标准库之一。它提供了强大的功能,包括获取图像中特定位置的颜色信息。...实际应用示例 图像处理 获取颜色的RGB值可以用于图像处理任务,例如图像分割、颜色识别等。 网页设计 在网页设计中,获取颜色的RGB值可以帮助设计师选择合适的配色方案。...数据可视化 在数据可视化中,使用颜色的RGB值可以将数据映射到颜色空间,以便更直观地展示数据。 总结 通过使用Python中的PIL库或OpenCV库,我们可以轻松地获取颜色的RGB值。

    31810

    dotnet OpenXML 如何获取 schemeClr 颜色

    颜色是一个大的主题,在 ECMA 376 里面用了 19 页 A4 描述了颜色,但仅是简单的描述。...例如我的文本设置为主题的文本颜色,那么在我更改文档主题的文本色就可以更改我的文本颜色 在 OpenXML 的颜色里面,其中 Scheme Color (a:schemeClr) 是十分强大的,可以用来作为模版发布...,就需要先获取 Color Map 颜色表,然后找到 Color Scheme 读取实际颜色。...ColorScheme; 如果是放在页面的元素,那么依次尝试获取 Slide 的主题,如果拿不到,就从 SlideLayout 获取,再获取不到就从 SlideMaster 获取。...如果是 Slide Layout 的元素,那么先从 SlideLayout 获取,而不能从 Slide 获取,如果获取不到就从 SlideMaster 获取 在拿到颜色表和主题,可以使用如下方法找到对应颜色

    1.2K20

    Python通过PIL获取图片的主要颜色并和颜色库进行对比的代码

    这段代码主要用来从图片提取其主要颜色,类似Goolge和Baidu的图片搜索时可以指定按照颜色搜索,所以我们先需要将每张图片的主要颜色提取出来,然后将颜色划分到与其最接近的颜色段上,然后就可以按照颜色搜索了...在使用google或者baidu搜图的时候会发现有一个图片颜色选项,感觉非常有意思,有人可能会想这肯定是人为的去划分的,呵呵,有这种可能,但是估计人会累死,开个玩笑,当然是通过机器识别的,海量的图片只有机器识别才能做到...答案是:能 利用python的PIL模块的强大的图像处理功能就可以做到,下面上代码: import colorsys def get_dominant_color(image): 颜色模式转换,以便输出...例如:划分为0-127,和128-255,然后自由组合,可以出现八种组合,然后从中挑出比较有代表性的颜色即可。...当然我只是举一个例子,你也可以划分的更细,那样显示的颜色就会更准确~~大家赶快试试吧

    1.2K10

    eyedroppeR精准获取图片中的颜色代码

    欢迎关注R语言数据分析指南 ❝本节来介绍一款R包「eyedroppeR」其最主要的作用就是导入的图片提取其中的颜色并返回十六进制的代码,小编测试后发现准确度非常的高,从此再也不用为颜色搭配而发愁了。...感兴趣的朋友欢迎分享转发,「更多详细内容请参考作者官方文档」 ❞ 官方文档 ❝https://github.com/doehm/eyedroppeR 安装R包 ❝eyedroppeR包的安装包约有30M...,在线下载失败的概率很大,建议将压缩包下载到本地进行安装 ❞ remotes::install_local("eyedroppeR-main.zip",upgrade = F,dependencies...= T) library(eyedroppeR) ❝下面小编通过几个案例来展示一下该款R包的使用方法及返还的结果,直接读入一些高分文章里面的图表来进行测序。...,右侧在图片下面展示出调色板,Rstudio左侧控制台直接生成十六进制代码,还可根据自己的需要设置颜色的个数。

    27030

    JS计算颜色对比度

    也许这些是预先制作的配色方案,公司颜色或从图像中提取。 现在我们有了这些潜在的背景颜色及其十六进制值,我们需要找出相应的文本是白色还是黑色,基于哪个具有更高的对比度,因此提供最佳的可读性。...就是这样:两个简单的对比度方程式,可以很好地确定最佳可读性。 如果您有兴趣了解更多,W3C有一些关于颜色对比的文档,以及如何确定任何两种颜色之间是否有足够的对比度。...为了完善它,Jonathan Snook创建了一个颜色对比度选择器,允许您使用RGB滑块来获取YIQ,对比度和其他值。这样你就可以快速摆弄旋钮,找到合适的平衡点。...比较结果 让我们重温一下我们的颜色方案,看看基于这两个方程推荐哪种文本颜色可以获得最大对比度。...如果我们使用简单的’50%’对比度函数,我们可以看到它建议黑色除了第二行上的深绿色和紫色之外的所有颜色。一般来说,等式感觉颜色很浅,黑色是文本的更好选择。

    5.4K30

    js实现:仿京东搜索栏随滑动透明度渐变

    其中search-box-cover就是控制透明度渐变的背景...shop-input { height:28px; line-height:28px; font-size:16px; position:absolute; top:0; left:30px; } 3、js...0.9 : ($body.scrollTop() / 150)) }) } //初始化设置背景透明度 setCoverOpacity(); //监听滚动条事件,改变透明度...0.9 : ($body.scrollTop() / 150)) 此三目表达式是判断当前滚动条位置所在位置,如果位置值除以150大于0.9,就返回0.9,反之就返回那个小于等于0.9的值,将返回的值设置为背景的透明度就完成了...2、由于滚动条的位置是动态获取的,所以设置透明度会不停改变,不用单独再做渐变的动画效果。 3、最终透明度问题,京东在最终背景设置的是0.9,所以本案例也采用的0.9,同时体验效果会更好。

    1.9K10
    领券