Javascript 获取图像的平均外部像素颜色

所以我想得到一幅图像中外部像素的平均颜色，给图像显示的div的背景，相同的颜色。所以我不必让所有的图像都是我自己的背景色

示例：如果图像为

100px x 100px

，则检查图像顶部的5个外部像素，图像右侧的5个外部像素，左侧和底部相同。你将得到5x100x4像素，得到颜色，检查平均值，让JS给div相同的背景

---

因此，如果平均颜色为

#000000

，则div BG将为

#000000

。如果平均值为

#FAFAFA

，则div BG将为

#FAFAFA

，您必须使用画布进行此操作。但这需要满足CORS限制

如果是这样的话，只需要从你想要分析的区域中提取像素，然后根据你计算的像素数进行相加和分割

演示

var img=new Image（）；//加载图像
img.crossOrigin=“”；//我们这里需要CORS。。。
img.onload=function（）{//加载映像时：
var div=document.querySelector（“div”）；
div.appendChild（this）；//将图像添加到DOM（演示）
div.style.background=分析（img，5）；//bg color=分析结果
}
img.src=”http://i.imgur.com/rUeQDjE.png";       // 某些映像（启用CORS）
功能分析（img、边界）{
var canvas=document.createElement（“canvas”），//创建一个canvas元素
ctx=canvas.getContext（“2d”），//获取上下文
w=img.naturalWidth，//获取实际宽度。。
h=img.自然高度；
canvas.width=w；//设置画布大小
canvas.height=h；
drawImage（img，0，0）；//在图像中绘制
//进行检查：，例如：
//如果（border*2>canvas.width | | border*2>canvas.height）抛出“图像太小！”；
//获取边框，避免重叠（尽管在这种情况下这并不重要）：
var top=ctx.getImageData（0,0,w，border）.data；
var left=ctx.getImageData（0，border，border，h-border*2）；
var right=ctx.getImageData（w-border，border，border，h-border*2）；
var bottom=ctx.getImageData（0，h-边框，w，边框）.data；
var r=0，g=0，b=0，cnt=0；
//计算像素数并添加颜色组件：（参见下面的函数）
countBuffer（顶部）；
countBuffer（左）；
countBuffer（右）；
计数缓冲区（底部）；
//计算平均值
r=（r/cnt+0.5）| 0；
g=（g/cnt+0.5）| 0；
b=（b/cnt+0.5）| 0；
返回“rgb”（“+r+”、“+g+”、“+b+”）；
函数计数器缓冲区（数据）{
变量i=0，len=data.length；
而（我

div{padding:30px}

---

有可用的代码吗？感谢您的帮助，我将在我的项目中使用此代码