canvas、javaScript实现取色器，获取本地图片的RGB值

本文只是用于本人学习的记录，存在bug，图片过大会导致取色有问题，猜想是边框设置问题，后续改进~

1.页面结构如下：

<h1>取色器</h1>
<div class="bd">
    <div class="huabu" >
        <input type="file" id="file_input" />
        <canvas id="canvasA" width="600" height="600"></canvas>
        <div class="anniu" >添加图片</div>
    </div>
    <div class="data">
        <div id="col"></div>
        <ul>
            <li>RGB:(0,0,0)</li>
            <li>十六进制:#000000</li>
        </ul>
    </div>

</div>

2.JS部分如下（需要引用JQ库，我用的是1.12版本）：

<script>
    
    $(function () {

        //初始化canvas
        var canvasA = $('#canvasA')[0];
        var cxtA = canvasA.getContext('2d');

        var img = new Image();//定义图像对象
        var pxData=null;
        var $lis=$("li");

        //读取文件
        $("input[type='file']").change(function(){
            var file = this.files[0];
            if (window.FileReader) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                //监听文件读取结束后事件
                reader.onloadend = function (e) {
                    // $(".file_img").attr("src",e.target.result);    //e.target.result就是最后的路径地址
                    img.src = e.target.result;
                };
            }
        });
        //图片读取完毕后，写到canvas里面
        img.onload = function(){
            if(img.width>600||img.height>600){
                $("#canvasA").attr("width",img.width/2);
                $("#canvasA").attr("height",img.height/2);
            }else if(img.width<300&&img.height<300){
                $("#canvasA").attr("width",img.width*2);
                $("#canvasA").attr("height",img.height*2);
            }else {
                $("#canvasA").attr("width",600);
                $("#canvasA").attr("height",600);
            }
            cxtA.drawImage(img, 0, 0, canvasA.width, canvasA.height);
            var imgDataA = cxtA.getImageData(0, 0, canvasA.width, canvasA.height);
            pxData = imgDataA.data;  //获取每一个像素
        }
        //获得鼠标相对于画布的坐标点
        $("#canvasA").on("click",function (e) {
            //获取鼠标位置
            var positionX=e.pageX - $(this).offset().left - parseFloat($(this).css('border-left-width'));
            var positionY=e.pageY - $(this).offset().top - parseFloat($(this).css('border-top-width'));
            //当前位置对应的成员
            var imgdata= positionY*canvasA.width+positionX;
            //获得rgb值
            var r = pxData[4*imgdata+0];
            var g = pxData[4*imgdata+1];
            var b = pxData[4*imgdata+2];
            var grey = 0.3*r + 0.59*g + 0.11*b;//灰度公式
            $("#col").css("backgroundColor","rgba("+r+","+g+","+b+")");
            // $("#col").css("backgroundColor","rgba("+r+","+g+","+b+","+grey+")");
            $lis.eq(0).text("RGB:("+r+","+g+","+b+")");
            $lis.eq(1).text("十六进制:#"+r.toString(16)+g.toString(16)+b.toString(16));
        });
        $(".anniu").on("click" , function () {
            $("#file_input").click();
        });
    });

</script>

3.改良方向，页面UI有点丑，添加网络路径的图片等