使用RGBaster获得图片的主题色，从而判断文字颜色深浅

最新推荐文章于 2024-05-13 09:32:52 发布

Study_Live_Sun

最新推荐文章于 2024-05-13 09:32:52 发布

阅读量1k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Study_Live_Sun/article/details/115004879

版权

1.首先引入RGBaster.js

;
(function(window, undefined) {

	"use strict";

	// Helper functions.
	var getContext = function(width, height) {
		var canvas = document.createElement("canvas");
		canvas.setAttribute('width', width);
		canvas.setAttribute('height', height);
		return canvas.getContext('2d');
	};

	var getImageData = function(img, loaded) {

		var imgObj = new Image();
		var imgSrc = img.src || img;

		// Can't set cross origin to be anonymous for data url's
		// https://github.com/mrdoob/three.js/issues/1305
		if (imgSrc.substring(0, 5) !== 'data:')
			imgObj.crossOrigin = "Anonymous";

		imgObj.onload = function() {
			var context = getContext(imgObj.width, imgObj.height);
			context.drawImage(imgObj, 0, 0);

			var imageData = context.getImageData(0, 0, imgObj.width, imgObj.height);
			loaded && loaded(imageData.data);
		};

		imgObj.src = imgSrc;

	};

	var makeRGB = function(name) {
		return ['rgb(', name, ')'].join('');
	};

	var mapPalette = function(palette) {
		var arr = [];
		for (var prop in palette) {
			arr.push(frmtPobj(prop, palette[prop]))
		};
		arr.sort(function(a, b) {
			return (b.count - a.count)
		});
		return arr;
	};

	var fitPalette = function(arr, fitSize) {
		if (arr.length > fitSize) {
			return arr.slice(0, fitSize);
		} else {
			for (var i = arr.length - 1; i < fitSize - 1; i++) {
				arr.push(frmtPobj('0,0,0', 0))
			};
			return arr;
		};
	};

	var frmtPobj = function(a, b) {
		return {
			name: makeRGB(a),
			count: b
		};
	}


	// RGBaster Object
	// ---------------
	//
	var PALETTESIZE = 10;

	var RGBaster = {};

	RGBaster.colors = function(img, opts) {

		opts = opts || {};
		var exclude = opts.exclude || [], // for example, to exclude white and black:  [ '0,0,0', '255,255,255' ]
			paletteSize = opts.paletteSize || PALETTESIZE;

		getImageData(img, function(data) {

			var colorCounts = {},
				rgbString = '',
				rgb = [],
				colors = {
					dominant: {
						name: '',
						count: 0
					},
					palette: []
				};

			var i = 0;
			for (; i < data.length; i += 4) {
				rgb[0] = data[i];
				rgb[1] = data[i + 1];
				rgb[2] = data[i + 2];
				rgbString = rgb.join(",");

				// skip undefined data and transparent pixels
				if (rgb.indexOf(undefined) !== -1 || data[i + 3] === 0) {
					continue;
				}

				// Ignore those colors in the exclude list.
				if (exclude.indexOf(makeRGB(rgbString)) === -1) {
					if (rgbString in colorCounts) {
						colorCounts[rgbString] = colorCounts[rgbString] + 1;
					} else {
						colorCounts[rgbString] = 1;
					}
				}

			}

			if (opts.success) {
				var palette = fitPalette(mapPalette(colorCounts), paletteSize + 1);
				opts.success({
					dominant: palette[0].name,
					secondary: palette[1].name,
					palette: palette.map(function(c) {
						return c.name;
					}).slice(1)
				});
			}
		});
	};

	window.RGBaster = window.RGBaster || RGBaster;

})(window);

2、在页面中调用使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取图片主题色脚本基础示例</title>
  <script src="./rgb.js"></script>
</head>
<body>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1546500353,2204894501&fm=26&gp=0.jpg" alt="" id="image">
<div style="height:100px;width:100px;"></div>
<script type="text/javascript">
  var img = document.getElementById('image');

  RGBaster.colors(img, {
    success: function(payload) {
      // You now have the payload.
      // payload.dominant是主色，RGB形式表示
      // payload.secondary是次色，RGB形式表示
      // payload.palette是调色板，含多个主要颜色，数组
      console.log(payload.dominant);
      console.log(payload.secondary);
      console.log(payload.palette);
	  
	  
	  
	  var RgbValue = payload.dominant.replace("rgb(", "").replace(")", "");


			var RgbValueArry = RgbValue.split(",");

			var $grayLevel = RgbValueArry[0] * 0.299 + RgbValueArry[1] * 0.587 + RgbValueArry[2] * 0.114;

			if ($grayLevel >= 192) {
			　　console.info('深色')
			} else {
			　　console.info('浅色')
			}
    }
  });
</script>
</body>
</html>

3、可能存在的问题

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: *

不同的服务器设置是不一样的，大家自行百之谷之。

4、js 判断颜色是否为深色阀值

//获取RGB值 颜色深用白色 颜色浅则用黑色


var RgbValue = this.style.backgroundColor.replace("rgb(", "").replace(")", "");


var RgbValueArry = RgbValue.split(",");

var $grayLevel = RgbValueArry[0] * 0.299 + RgbValueArry[1] * 0.587 + RgbValueArry[2] * 0.114;

$this.addClass("color_curr");

if ($grayLevel >= 192) {
　　$this.html('<p class="fa fa-check color_black"></p>');
} else {
　　$this.html('<p class="fa fa-check color_withe"></p>');
}

Study_Live_Sun

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用RGBaster获得图片的主题色，从而判断文字颜色深浅

1.首先引入RGBaster.js;(function(window, undefined) { "use strict"; // Helper functions. var getContext = function(width, height) { var canvas = document.createElement("canvas"); canvas.setAttribute('width', width); canvas.setAttribute('height',
复制链接

扫一扫