lundi 29 août 2016

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

I HAVE TRIED EVERYTHING!!! so what I have so far is to make 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.

so here is an example that I found online: file:///C:/Users/denni_000/Desktop/Project/onlinesoftware/ki/html-color-codes.info/index.html

now here is what I have so far:

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




Aucun commentaire:

Enregistrer un commentaire