制作一個可以在上傳的圖片中找到顏色的搜索框。

[英]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/

這里有一個我在網上找到的例子: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>

1 个解决方案

#1


3  

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.

imgData是一個寬x高x 4的數組,每四個連續值分別為R、G、B和一個像素。

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

要獲得像素@坐標的綠色值(20,3),必須讀取imgData[(20 + 3 * img.width) * 4 + 1]


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/08/29/729bbc7c8c270b595c2b2864e2bcbb66.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com