Jquery查找左上角像素图像的颜色[重复]答案

【问题标题】：Jquery find color of top left pixel image [duplicate]Jquery查找左上角像素图像的颜色[重复]
【发布时间】：2016-08-25 12:21:36
【问题描述】：

JQuery 有没有办法找到图像的第一个像素顶部/左侧颜色？

谢谢

【问题讨论】：

没有。 jQuery 不是图像处理工具。

标签： jquery

【解决方案1】：

基于此答案：How to get a pixel's x,y coordinate color from an image?

您可以绘制一个画布，将图像加载到其中并使用getImageData 读取左上角的 1x1 像素。

Canvas 2D 的 CanvasRenderingContext2D.getImageData() 方法 API 返回一个表示底层像素数据的 ImageData 对象对于由矩形表示的画布区域，该矩形开始于 (sx, sy) 并且具有 sw 宽度和 sh 高度。

函数返回一个ImageData对象，访问data属性就可以得到像素信息。

只读的 ImageData.data 属性返回一个 Uint8ClampedArray 表示包含 RGBA 中数据的一维数组顺序，整数值在 0 到 255 之间（包括在内）。

代码：

var myImg = new Image();
myImg.src = '../img/logo.png';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(myImg, 0, 0);
console.log(context.getImageData(0, 0, 1, 1).data);

演示：https://jsfiddle.net/2v7ksm7c/

【讨论】：

【解决方案2】：

如果您使用 PHP，您可以在将其发送到客户端之前找到它并将其包含在您的 HTML 中。 http://php.net/manual/en/function.imagecolorat.php

将其放入 data-pixelColor 元素中，以便在 jQuery 中重复使用。

【讨论】：