如何获得图片某点的RGB值?

javascript

解决方案 »

  1.   

    用html5的canvas标签可以实现。
    w3schools例子在此——
    http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_getimagedata2
    算了，我粘贴过来吧……<!DOCTYPE html>
    <html>
    <body><img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
    <canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas><script>
    document.getElementById("scream").onload=function(){
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      var img=document.getElementById("scream");
      ctx.drawImage(img,0,0);
      var imgData=ctx.getImageData(0,0,c.width,c.height);
      // invert colors
      for (var i=0;i<imgData.data.length;i+=4)
        {
        imgData.data[i]=255-imgData.data[i];
        imgData.data[i+1]=255-imgData.data[i+1];
        imgData.data[i+2]=255-imgData.data[i+2];
        imgData.data[i+3]=255;
        }
      ctx.putImageData(imgData,0,0);
    };
    </script>
    </body>
    </html>
    它这个例子是反转图片了。
    用getImageData(x,y,w,h)可以获得ImageData，其中——
    red=imgData.data[0];
    green=imgData.data[1];
    blue=imgData.data[2];
    alpha=imgData.data[3];
    如果你想在后台算，直接hide就是了。
      

  2.   

    有一个工具，你鼠标放在哪儿，这个点的颜色的RGB值都可以得到：ColorPix