Jquery find color of top left pixel image

Question

Is there a way with JQuery to find the first pixel top/left color of an image ?

thank you

Answer 1

If you use PHP you can find it and include in your HTML before sending it to the client. http://php.net/manual/en/function.imagecolorat.php

Put it in a data-pixelColor element for re-use in jQuery.

Answer 2

Based on this answer: How to get a pixel's x,y coordinate color from an image?

You can draw a canvas, load the image into it and read the top-left 1x1 pixel using getImageData.

The CanvasRenderingContext2D.getImageData() method of the Canvas 2D API returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.

The function return an ImageData object, accessing data property you'll get the pixel information.

The readonly ImageData.data property returns a Uint8ClampedArray representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (included).

Code:

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);

Demo: https://jsfiddle.net/2v7ksm7c/