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有点丑，添加网络路径的图片等