“复用”JS代码实现获取图片主色调

最新推荐文章于 2024-07-24 14:26:48 发布
最新推荐文章于 2024-07-24 14:26:48 发布
阅读量4.2k 收藏 1
点赞数
分类专栏： web前端 文章标签： html javascript 图片

首先附上链接：CSDN资源传送门
包括两部分，基础 jQuery 和 使用的到的 color-thief.js
使用方法：
1、解压，在html代码中引用
引用
2、可以直接使用了（#抠鼻23333）

关于如何使用：（可以log一个试试看）

//输出imgId对应图片的主色调中的R值
console.log(getDominantColor(document.getElementById('imgId')).r)

具体内容查看color-thief.js代码

=_=#爽

Dead-Rabbit
关注
专栏目录
Js之canvas获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件
11-17
Js之canvas获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
js 获取 图片颜色
12-17
通过cancas 获取图片图片的颜色，可以是固定位置的颜色，也可以是所有位置的颜色
js实现根据图片颜色获取主色，同时动态改变dom里面文字的颜色
最新发布
weixin_45791806的博客
07-24 263
【代码】js实现根据图片颜色获取主色，同时动态改变dom里面文字的颜色。
js获取图片主色调
Executioner975的博客
02-04 4413
js获取图片主色调，动态生成渐变色蒙版效果演示实现思路git源码 用js获取图片的主颜色动态改变 左右两边 的渐变色，达到一个动态生成图片蒙版的效果 效果演示 演示地址：http://yanghao304.gitee.io/#/music 实现思路 1、先在 canvas 上画出图片， <img id="img_test" src="http://p1.music.126.net/TzMwwPWS6lONrPqOiOrZFw==/109951165693801980.jpg ">
通过js获取主要颜色
06-26
最近写了个js，可以用来获取图片的主要颜色 只需要引入js，然后在js中用以下方法引用。 Maincolor.getmaincolor(图片，{sucess:function(p(任意参数){p.maincolor//主要颜色//可以进行各种操作}，是否忽略黑色（默认是忽略，可以填null），色阶)
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
热门推荐
qq_41076441的博客
11-19 1万+
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。 **应用场景：**在很多时候，前端开发过程中需要动态的获取图片的主要的颜色值，并根据主色调去调整主题样式的颜色或者模拟出一套配色方案，如图 根据png图片颜色，动态设置背景颜色或者文字颜色，使其提高对比度提高内容的可读性。 根据图片，模拟出一套主题配色方案。 实现及原理：以canvas的getImageData(...
color-thief.js
08-13
“复用”JS代码实现获取图片主色调的资源，url=【http://blog.csdn.net/dead_rabbit6_0/article/details/53230869】
股票证券CSS网站模板是一款绿色风格的CSS证券交易网站模板下载。_html网站模板_网页源码移动端前端_H5模板_自.rar
08-05
股票证券CSS网站模板是一款专为证券交易设计的网页模板，它采用了绿色为主色调，旨在提供一个清新、专业的在线投资环境。这款模板充分利用了CSS技术，确保页面布局清晰、响应式，能够适应不同设备的屏幕尺寸，无论是...
电商后台管理系统简介
jiangshen_a的博客
11-01 9177
树形组件element-tree-grid在表格中的运用
在程序中加入网上的图片
02-23
这些库能帮助我们方便地发送GET请求，获取图片数据。 4. **数据解析**：获取到的图片数据通常是二进制流，需要将其解析成图片对象。例如，在Python中，可以使用`PIL`（Pillow）库，Java中使用`javax.imageio....
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
javascript 获取图片颜色
12-11
利用canvas的2d对象，我们可以获取图片每个像素点的数据 CanvasPixelArray 舜子这里也写了一个简单的 getImageData 的演示 图片取色演示。这个演示目前只能在ff3下运行。 能够获取像素点后，是不是以后的OCR文字识别系统都直接online了呢？ 相关资料: http://www.whatwg.org/specs/web-apps/current-work/#dom-context-2d-getimagedata
使用 javascript 提取图像颜色
03-13
通过javascript来提取图像中的颜色，并通过 CSS 过滤器将图像转换为黑色和白色版本，还有一个“幕布”滑动的效果。
ImgMainColor:获取图片主色调的插件
05-11
ImgMainColor 获取图片主色调的插件 传入参数 options callback options: Object 必传，识别配置 options={ src: String, 必传，图片地址 size: Number, 非必传，单位色块的大小（像素个数，默认40）。以单位色块的平均像素值为作为统计单位 level: Number, 非必传，颜色分区参数（1-255，默认32）,以level为单位分割256个色级，默认每个通道分为8段，所以一共有8*4=32个色区 exclude: Array<String>, 非必传，排除颜色数组，统计时，需要排除掉的颜色，支持格式有#FFF,#FFFFFF,rgb(0,0,0),rgba(0,0,0,0),(#FFF0第四位为alpha值,#FFFFFF
Node.js图片主题色提取包ThmclrX.zip
07-19
ThmclrX 是一个能提取图片主题色的 Node.js 包。 有三个 API：var thmclrx = require("thmclrx"); thmclrx.octreeGet(file, [maxColors], [callback], [frameNumber]); thmclrx.mindiffGet(file, [palette], [callback], [frameNumber]); thmclrx.mixGet(file, [firstStepMaxColors], [palette], [callback], [frameNumber]);上面三种方法提取出来的图片主题色结果都不一样，按自己的需求选择。 标签：ThmclrX
js获取图片的颜色
九段刀客的博客
01-05 1230
【代码】js获取图片的颜色。
js图片 area 颜色_JS提取图片的主体颜色
weixin_35914724的博客
02-01 440
语言：js颜色量化算法：中位切分法简介1.获取图像的像素点数据，getImageData，得到的数据每四位分别代表一个rgba的值，这里可以把透明的像素点去掉即a=0的像素点，也可以把范围设置大一点。按每四位存到一个数组里头，接下来就是对数组进行处理。2.中位切分算法首先把所有像素映射到RGB空间，我们以R,G,B中最长的边构造一个立方体，并且以这条边从中间切割，可以分别得到两个包含相同像素点的长...
js：获取图片颜色的主色调
彭世瑜的博客
08-22 1248
在浏览器环境中，可以通过canvas 获取图片的颜色列表，再对其进行排序，就能获取图片颜色主色调了，也可以使用开源库，可以很方便的获取图片颜色。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值