js实现一个图片点击拾色器取色器效果代码-html代码-BFW代码库

代码语言：html

代码描述：js实现一个图片点击拾色器取色器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>取色器</title>

    <style type="text/css">
        body {
            margin: 0;
        }

        .module-content {
         
            width: 100%;
            color: #000;
            margin: 0 auto;
        }
        .module-head {
            text-align: center;
            font-weight: 500;
            margin: 0;
            font-size: 30px;
            height: 100px;
            line-height: 100px;
        }
        .module-check-img-box {
            margin: 0 auto;
            text-align: center;
          
         
        }
        .module-check-box {
            width: 20%;
            float: right;
        }
        .module-list-name {
            font-size: 16px;
            height: 50px;
            line-height: 50px;
        }
        .module-box {
            width: 100px;
            height: 100px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }
        .module-box input {
            width: 100px;
            height: 100px;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
        .module-box img {
            width: 100px;
            height: 100px;




        }
        #showImg {
            cursor: url(//repo.bfw.wiki/bfwrepo/icon/6104e60639116.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_12,h_12,/quality,q_90),auto;
        }
        .module-file-box {
            min-width: 400px;
            min-height: 400px;
            max-height: 1000px;
            overflow: auto;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px;
        }
        .module-check {
            position: relative;
            display: inline-block;
            height: 50px;
            line-height: 50px;
        }

        .clear-float:after {
            content: '';
            display: block;
            height: 0px;
            clear: both;
        }
        .module-show-area section {
            float: left;
            width: 50%;
            font-size: 0;
        }
        .module-show-area section p {
            line-height: 30px;
            display: inline-block;
            width: 200px;
            font-size: 16px;
        }
        .module-show-area section p span {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }
        .show-all-color {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            border: none;
            outline: none;
            background: blue;
            border-radius: 5px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="module-content">

        <div >
            <div class="module-check-img-box">
                <div class="module-list-name ">
                    请选择一张本地图片：
                </div>
                <div class="module-box" >
                    <img src="//repo.bfw.wiki/bfwrepo/image/6104983fc6f8c.png" />
                    <input type="file" id="file" onChange="setFiles(this,'showImg')" class="form-control" placeholder="请选择一张本地图片">
                </div>

                <div class="module-file-box" id="showpannel" style="display:none;">
                    <div class="module-list-name">
                        图片显示区域：
                    </div>
                    <img id="showImg" onClick="colorPicker(0,{showImg:'showImg',area16:'area-16',areaRgba:'area-rgba',check16:'check16',checkRgb:'checkRgb',checkAlike:'checkAlike',checkRange:'checkRange'})" src="//repo.bfw.wiki/bfwrepo/image/6104983fc6f8c.png" />


                    <div>
                        <button class="show-all-color" onClick="colorPicker(1,{showImg:'showImg',area16:'area-16',areaRgba:'area-rgba',check16:'check16',checkRgb:'checkRgb',checkAlike:'checkAlike',checkRange:'checkRange'})">显示所有颜色</button>
                    </div>
                    <div class="module-show-area">
                        <section id="area-16p">
                            <div class="module-list-name">
                                十六进制显示区域：
                            </div>
                            <div id="area-16"></div>
                        </section>
                        <section id="area-rgbap">
                            <div class="module-list-name">
                                RBGA显示区域：
                            </div>
                            <div id="area-rgba"></div>
                        </section>
                    </div>
                    <div>
                        <label>
                            <input type="checkbox" id="checkRange" checked="checked">
                            <span></span>
                            是否模糊周边颜色
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="checkbox" id="check16" onClick="check({area16:'area-16p',areaRgba:'area-rgbap',check16:'check16',checkRgb:'checkRgb'})" checked="checked">
                            <span></span>
                            是否十六进制显示
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="checkbox" id="checkRgb" onClick="check({area16:'area-16p',areaRgba:'area-rgbap',check16:'check16',checkRgb:'checkRgb'})" checked="checked">
                            <span></span>
                            是否RGB显示
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="checkbox" id="checkAlike">
                            <span></span>
                            显示相同颜色(此项由于较大，打印在控制台！)
                        </label>
                    </div>
                </div>
            </div>
            <div class="module-check-box">

            </div>
        </div>

    </div>

    <script type="text/javascript">
        (() => {
            let obj = {};
            //获取DOM对象的方法
            let $ = function(id) {
                return document.getElementById(id);
            }
            //获取预览图片路径
            let getObjectURL = function(file) {
                let url = null;
                if (window.createObjectURL != undefined) {
                    // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) {
                    // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) {
                    // webkit or chrome
                    url = windo.........完整代码请登录后点击上方下载按钮下载查看