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]