WEB前端仿制PS拾色器

nodejs前端开发案例|java前端开发需要哪些技术|秦皇岛前端开发javaee

代码片段 1

<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
    <meta charset=”UTF-8″ />
    <meta name=”Keywords” content=”” />
    <meta name=”Description” content=”” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes,minimal-ui”
    />
    <meta name=”apple-mobile-web-app-capable” content=”yes” />
    <title>简单模仿Photoshop拾色器</title>
    <style>
        h2 {
            text-align: center;
        }
        .palette {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 600px;
            height: 362px;
            padding: 12px;
            margin: auto;
            border: 1px solid #CCC;
            background-color: #DCDCDC;
        }
        .palette>div {
            position: relative;
            height: 100%;
            border: 1px solid #CCC;
        }
        .palette>div:nth-of-type(1) {
            width: 60%;
            margin-right: 2%;
            overflow: hidden;
            float: left;
        }
        .palette>div:nth-of-type(2) {
            width: 5%;
            float: left;
        }
        .palette>div:last-child {
            border-width: 0;
            width: 30%;
            height: 100%;
            text-align: right;
            float: right;
        }
        .palette>div>input {
            width: 70%;
            margin: 0 0 1em .2em;
            padding: .3em;
        }
        .palette>div>input[type=”button”]:nth-of-type(2) {
            margin-bottom: 5em;
        }
        .palette>div>i {
            position: absolute;
            ;
            pointer-events: none;
        }
        .palette>div:first-child>i {
            left: 100%;
            top: 0;
            width: 9px;
            height: 9px;
            border: 1px solid #000;
            border-radius: 50%;
            margin: -5px 0 0 -5px;
            box-shadow: 0 0 1px 1px #FFF
        }
        .palette>div:nth-of-type(2)>i {
            left: 0;
            top: 0;
            width: 100%;
            height: 10px;
            margin-top: -5px;
        }
        .palette>div:nth-of-type(2)>i:before,
        .palette>div:nth-of-type(2)>i:after {
            position: absolute;
            content: “”;
            width: 0;
            height: 0;
            border: 5px solid transparent;
        }
        .palette>div:nth-of-type(2)>i:before {
            left: -5px;
            top: 0;
            border-left-color: #000;
        }
        .palette>div:nth-of-type(2)>i:after {
            right: -5px;
            top: 0;
            border-right-color: #000;
        }
    </style>
</head>
<body>
    <h2>简单模仿Photoshop拾色器</h2>
    <div class=”palette”>
        <div></div>
        <div></div>
        <div>
            <input type=”button” value=”确定” />
            <input type=”button” value=”取消” /> rgb
            <input type=”text” readonly=”readonly” /> #
            <input type=”text” readonly=”readonly” />
        </div>
    </div>
    <script>
        //<![CDATA[
        !function () {
            var stage = document.querySelector(“.palette”),
                divs = stage.children,
                cvs = document.createElement(“canvas”),
                cvs1 = cvs.cloneNode(false),
                i = document.createElement(“i”),
                i1 = i.cloneNode(false),
                ctx1 = cvs1.getContext(“2d”),
                ch = divs[1].clientHeight,
                cw = divs[1].clientWidth;
            cvs.width = divs[0].clientWidth;
            cvs.height = divs[0].clientHeight;
            cvs1.height = ch;
            cvs1.width = cw;
            divs[0].appendChild(cvs);
            divs[0].appendChild(i);
            divs[1].appendChild(cvs1);
            divs[1].appendChild(i1);
            while (–ch >= -1) {
                ctx1.beginPath();
                ctx1.strokeStyle = “hsl(” + ch + “,100%,50%)”;
                ctx1.moveTo(0, ch);
                ctx1.lineTo(cw, ch);
                ctx1.stroke();
                ctx1.closePath();
            }
            function setPalette(data) {
                var w = cvs.width, h = cvs.height, r = data[0], g = data[1], b = data[2], a = data[3], o, i = 0, j, ctx = cvs.getContext(“2d”), imgData = ctx.getImageData(0, 0, w, h), data2 = imgData.data, w2 = w * 4;
                for (; i < h; i++) {
                    for (j = 0; j < w2; j += 4) {
                        o = 255 * (h – i) / h;
                        data2[i * w2 + j] = o – (o – r * (h – i) / h) * j / w2 | 0;
                        data2[i * w2 + j + 1] = o – (o – g * (h – i) / h) * j / w2 | 0;
                        data2[i * w2 + j + 2] = o – (o – b * (h – i) / h) * j / w2 | 0;
                        data2[i * w2 + j + 3] = 255;
                    }
                }
                ctx.putImageData(imgData, 0, 0);
                setColor(data);
            }
            function setColor(data) {
                var inps = stage.querySelectorAll(“input[type=’text’]”);
                inps[0].value = data[0] + “,” + data[1] + “,” + data[2];
                inps[1].value = hex(data[0]) + hex(data[1]) + hex(data[2]);
            }
            function hex(n) {
                return n > 16 ? n.toString(16).toUpperCase() : “0” + n.toString(16).toUpperCase();
            }
            cvs.addEventListener(“click”, function (e) {
                var x = e.offsetX, y = e.offsetY;
                e.preventDefault;
                e.stopPropagation();
                setColor(this.getContext(“2d”).getImageData(x, y, 1, 1).data);
                i.style.left = x + “px”;
                i.style.top = y + “px”;
            }, false);
            cvs1.addEventListener(“click”, function (e) {
                var x = e.offsetX, y = e.offsetY, data = this.getContext(“2d”).getImageData(x, y, 1, 1).data;
                e.preventDefault;
                e.stopPropagation();
                setPalette(data);
                i1.style.top = y + “px”;
                i.style.left = i.style.top = “auto”;
            }, false);
            setPalette(ctx1.getImageData(0, 0, 1, 1).data);
        }();
//]]>
    </script>
</body>
</html>

ext6js 前端开发|web前端开发技术——html_css_javascript|jsp前端界面开发

» 本文来自:前端开发者 » 《WEB前端仿制PS拾色器》
» 本文链接地址:https://www.rokub.com/5271.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!