js颜色拾取器

在用百度热力图时，接触到图例值域，故抽空做一简单的例子。

预览地址：http://bl.ocks.org/chengquan223/raw/5cf20ce2cbc6e1ea3d83/

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>颜色取色器colorPicker</title>
    <style type="text/css">
        html,body{margin:0;padding:0;font-size:12px}#content{margin:20px auto;width:600px;height:300px}.content-left{float:left;width:400px;height:inherit}.content-right{float:left;width:180px;height:inherit;margin-left:18px}.canvas-scale{height:15px;top:25px;padding:0;margin:0;float:left}.canvas-selColor{float:left;width:100%;height:260px;margin-top:10px}#colorCanvas{cursor:crosshair;float:left}
    </style>
</head>
<body>
    <div id="content">
        <div class="content-left">
            <canvas id="colorCanvas" width="400" height="15"></canvas>
            <div class="canvas-scale">
                <canvas id="rangeCanvas" width="400" height="15"></canvas>
            </div>
            <div class="canvas-selColor"></div>
        </div>
        <div class="content-right">
            <input type="text" id="colorValue" size="10" />值域<br /><br />
            <input type="text" id="position" size="10" />canvas坐标<br /><br />
            <input type="text" id="rgb" size="10">rgb颜色值<br /><br />
            <input type="text" id="color" size="10">16进制颜色码<br /><br />
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    var colorCanvas = document.getElementById("colorCanvas");
    var context = colorCanvas.getContext("2d");
    var colorGradient = { 0: 'rgba(100,255,51,1)', 0.167: 'rgba(153,255,51,1)', 0.333: 'rgba(204,255,51,1)', 0.5: 'rgba(255,255,71,0.8)', 0.667: 'rgba(255,250,150,1', 0.833: 'rgba(255,187,102,0.9)', 1: 'rgba(255,119,68,0.9)' };
    var sortNumber = function (a, b) {
        return a - b;
    };
    var Picker = function () {
        this.range = [50, 100, 150, 200, 300];
        this.drawColor = function () {
            var grad = context.createLinearGradient(0, 0, colorCanvas.width, colorCanvas.height);
            for (var gradient in colorGradient) {
                grad.addColorStop(gradient, colorGradient[gradient]);
            }
            context.fillStyle = grad;
            context.fillRect(0, 0, colorCanvas.width, colorCanvas.height);
        };
        this.drawRange = function () {
            var rangeCanvas = document.getElementById("rangeCanvas");
            var width = rangeCanvas.width;
            var ctx = rangeCanvas.getContext("2d");
            var len = this.range.length;
            var maxValue = this.range.sort(sortNumber)[len - 1];//数组最大value
            ctx.drawLine = function (beginX, beginY, endX, endY) {
                this.moveTo(beginX, beginY);
                this.lineTo(endX, endY);
            };
            ctx.fillText("0", 0, 14);
            ctx.save();
            ctx.translate(0.5, 0.5); //消除锯齿
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.drawLine(0, 0, 0, 4); //第一个刻度
            for (var i = 0; i < len - 1; i++) {
                var px = Math.round(width * this.range[i] / maxValue);
                ctx.fillText(this.range[i], px - 8, 14);
                ctx.drawLine(px, 0, px, 4);
            }
            var endPx = Math.round(width * this.range[len - 1] / maxValue);
            ctx.fillText(this.range[len - 1], endPx - 18, 14);
            ctx.drawLine(endPx - 1, 0, endPx - 1, 4); //最后一个刻度
            ctx.stroke();
        };
        this.drawCircle = function (point, color) {
            context.clearRect(0, 0, colorCanvas.width, colorCanvas.height);
            this.drawColor();
            context.beginPath();
            context.arc(point.X, point.Y, 2, 0, 360, false);
            context.fillStyle = color;
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = "#000";
            context.stroke();
            context.save();
            context.closePath();
        };
        this.d2Hex = function (d) {
            // Converts a decimal number to a two digit Hex value
            var hex = Number(d).toString(16);
            while (hex.length < 2) {
                hex = "0" + hex;
            }
            return hex.toUpperCase();
        };
        this.getRgbColor = function (point) {
            var imageData = context.getImageData(0, 0, colorCanvas.width, colorCanvas.height);
            var data = imageData.data;
            var i = ((point.Y * colorCanvas.width) + point.X) * 4;
            var rgb = [], color = '#', objRgbColor = { "rgb": rgb, "color": color };
            for (var j = 0; j < 3; j++) {
                rgb.push(data[i + j]);
                color += this.d2Hex(data[i + j]);
            }
            objRgbColor.color = color;
            return objRgbColor;
        };
        this.getIntOffset = function (e) {
            var evt = e || window.event;
            var srcObj = evt.target || e.srcElement;
            if (e.offsetX) {
                return { X: parseInt(e.offsetX), Y: parseInt(e.offsetY) };
            } else {
                var rect = srcObj.getBoundingClientRect();
                return { X: parseInt(e.clientX - rect.left), Y: parseInt(e.clientY - rect.top) };
            }
        };
        this.getValue = function (point) {
            return Math.round(this.range[this.range.length - 1] * point.X / colorCanvas.width);
        };
        this.setColor = function (point) {
            var objRgbColor = this.getRgbColor(point);
            var rgb = "rgb(" + objRgbColor.rgb.join(",") + ")";
            this.drawCircle(point, color);
            document.getElementsByClassName("canvas-selColor")[0].style.background = rgb;
            document.getElementById("colorValue").value = this.getValue(point);
            document.getElementById("position").value = point.X + "," + point.Y;
            document.getElementById("rgb").value = rgb;
            document.getElementById("color").value = objRgbColor.color;
        };
    };
    var initPicker = function () {
        var picker = new Picker();
        picker.drawColor();
        picker.drawRange();
        colorCanvas.onclick = function (e) {
            var point = picker.getIntOffset(e);
            picker.setColor(point);
        }
    }
    initPicker();
</script>
View Code

 

posted @ 2016-03-16 18:13  Jack、Chen  阅读(3685)  评论(0)  编辑  收藏  举报