js: color-thief在浏览器中拾取图片的主色调

Grab the color palette from an image using just Javascript. Works in the browser and in Node.

译文：使用Javascript从图像中抓取调色板。在浏览器和Node.js中工作。

文档：

https://github.com/lokesh/color-thief
https://lokeshdhakar.com/projects/color-thief/
https://www.npmjs.com/package/color-thief

使用示例

浏览器中

<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script><script>const colorThief = new ColorThief();const img = new Image();img.addEventListener("load", function () {let color = colorThief.getColor(img);console.log(color);// [125, 190, 193]});img.crossOrigin = "Anonymous";img.src = "./image.jpg";
</script>

一个简单实现

const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = "./image.jpg";
img.setAttribute("width", 1);
img.setAttribute("height", 1);img.onload = () => {const canvas = new OffscreenCanvas(1, 1);const ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, 1, 1);const { data } = ctx.getImageData(0, 0, 1, 1);console.log(`rgba(${data.join(",")})`);// rgba(120,143,122,255)
};

参考
你的图片加载，一点都不酷炫！不信You Look Look…

js: color-thief在浏览器中拾取图片的主色调相关推荐

Vue2.js：前端在浏览器中网页表格打印的实现方案：window.print、print-js、iframe
目录需求描述方案1:直接打印页面方案2:使用css媒体查询控制打印内容方案3:第三方插件print-js 方案4:将要打印的节点内容写入iframe 方案5:将要打印的html写入iframe ...
js获取UEditor文本编辑器中的图片地址
写之前在网上找了很多方法,最简单的思路应该是1.获取UEditor中的内容:2.将获取到的字符串转换成jquery对象:3.选择器找到img元素,获取src值. var content= UE.get ...
HTML引入vue.js，在ie浏览器中不显示
因为只有两个页面,所以我没有用 vue-cli 搭框架,直接在 HTML 中引入vue.js 文件.发现其他浏览器都能正常显示,ie 下显示不正常,而且还报错,错误信息如下: 原因: 主要是因为 ie ...
在进行页面的DIV CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。...
当一个img标签没得图片时,在firox中,即使给img标签设置了固定高度和宽度,img标签还是不会站位: 解决方法一:直接将img设置为块状元素:即,设置img为"display:bloc ...
js 实现批量下载页面中的图片
需要用到jszip.js和FileSaver.js 思路是先获取页面上的所有图片,得到src //引入js文件(vue直接npm安装) import JSZip from 'jszip' import ...
JS动态更新微信浏览器中的title
问题: 最近在做一个微信中分享的宣传页,分不同的场景,切换不同的场景时需要设置不同的title,实现的方案很简单,当用户切换场景的时候,修改document对象的title属性,可是在实际测试中,io ...
JS计算字符串在浏览器中显示的宽度
js计算字符串宽度大家可能会碰到这样一个需求:一个容器的宽度固定,当内容的宽度超过容器的宽度时鼠标移入显示提示框,不超过时则不显示. 这个时候就需要知道内容到底多宽. 怎么计算宽度一 .估计法假 ...
【机器学习】Tensorflow.js：我在浏览器中实现了迁移学习
⭐️ 本文首发自前端修罗场(点击加入),是一个由资深开发者独立运行的专业技术社区,我专注 Web 技术.答疑解惑.面试辅导以及职业发展.现在加入,私聊我即可获取一次免费的模拟面试机会,帮你评估知识点 ...
js：fetch在浏览器中发送 HTTP 请求
文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch https://www.ruanyifeng.co ...
HTML+JS实现浏览器前端下载图片
最近做项目需要用到js图片下载,按照原先下载文件的思路,我感觉直接 window.open("下载链接"); 就可以了,但实际操作后,发现这个只会在新窗口打开图片,并不会触发下载, ...

js: color-thief在浏览器中拾取图片的主色调

js: color-thief在浏览器中拾取图片的主色调相关推荐

最新文章

热门文章