CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dennis Stefanakis
Dennis Stefanakis

Reputation: 11

Making a search box that can find a color in an uploaded image

So far, my code makes the user upload an image, but I still can't figure out how I could make the search box find the color on the image and put a yellow dot on it.

Here is an example that I found online: http://html-color-codes.info/

Here is my code:

<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<canvas id="imageCanvas"></canvas>

<script>
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');


function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
    var img = new Image();
    img.onload = function(){
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img,0,0);
    }
    img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);     
}
</script>

Upvotes: 1

Views: 78

Answers (1)

user5734311
user5734311

Reputation:

After drawing the image, you can do this:

imgData = ctx.getImageData(0, 0, img.width, img.height).data;

imgData is an array with a size of width x height x 4, with each four consecutive values being R, G, B and A of a pixel.

To get the green value of the pixel @ coordinates (20, 3), you have to read imgData[(20 + 3 * img.width) * 4 + 1]

Upvotes: 3

Related Questions