Question

大家好

所以我想要制作一个小的颜色选择器，它也允许alpha通道。我开始工作，很快就完成了标记。但是，用于选择像素颜色的实际代码不起作用。我有一些怀疑，为什么它不起作用，但我绝对没有解决方案。

我怀疑是这样的：我使用的是具有空像素的渐变叠加图像，因此rgb到hex函数返回00，因为它不是正确的数字。

<div class="cpick-card">
    <main class="cpicker">
        <div class="cpicker-main">
            <div class="cfinder">
                <div id="cfinder-pointer"></div>
                <canvas id="cfinder" width="1" height="100"></canvas>
            </div>
            <div class="color-grad">
                <div id="color-grad-pointer"></div>
                <canvas id="color-grad"></canvas>
                <!--<img id="color-grad" src="css/img/colorpicker.png" style="background-color:red;">-->
            </div>
        </div>
        <div class="afinder">
            <div id="afinder-pointer"></div>
            <canvas id="afinder" width="1" height="100"></canvas>
        </div>
    </main>
    <footer class="cpick-footer"></footer>
</div>

CSS：

html, body {
    min-height: 400px;
    height: 100vh;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(to bottom right, #B977B1 50%, #8276B5) no-repeat center center fixed;
    background-size: cover;
    transition: 300ms ease-in-out;
}

html, body, .card, .form {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cpick-card{
    height:400px;
    width:400px;
    background-color:rgba(0,0,0,.5);
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:center;
}
.cpicker{
    flex:1;
    width:100%;
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:center;
}
.cpicker-main{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:stretch;
    width:100%;
    padding:10px;
    box-sizing:border-box;
}

.cfinder{
    flex:0 0 30px;
    width:30px;
    background:cyan;
    height:100%;
    margin-right:10px;
    position:relative;
}
#cfinder,#afinder{
    left:0;
    top:0;
    height:100%;
    width:100%;
    display:block;
    position:absolute;

}
#cfinder{
    /* background:linear-gradient(to bottom, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%); */

}
.color-grad{
    flex:1;
}
#color-grad{
    width:100%;
    height:100%;
    /*background-image:url("img/colorpicker.png");*/
    /*background-color:red;*/
    background-size:100% 100%;
    box-sizing:border-box;
}

#color-grad:hover,#afinder:hover,#cfinder:hover{
    cursor:crosshair;
}

.afinder{
    margin-bottom:10px;
    flex:0 0 30px;
    width:calc(100% - 20px);
    padding:10px;
    box-sizing:border-box;
    position:relative;
}
#afinder{
    background:linear-gradient(to right, transparent,rgba(255,255,255,.5), #fff);
}

.cpick-footer{
    flex: 0 0 10%;
    width:100%;
}

JS：

    var canvas = document.getElementById('color-grad');
var canvas2 = document.getElementById('cfinder');
console.log(canvas);

var ctx = canvas.getContext('2d');
var ctx2 = canvas2.getContext('2d');

var img = new Image();
img.src = "https://s18.postimg.org/vrw18c8a1/colorpicker.png";

var cfinder = ctx2.createLinearGradient(0,0,canvas2.width,canvas2.height);
cfinder.addColorStop(0,"#f00");
cfinder.addColorStop(0.17,"#ff0");
cfinder.addColorStop(0.33,"lime");
cfinder.addColorStop(0.50,"cyan");
cfinder.addColorStop(0.66,"blue");
cfinder.addColorStop(0.83,"#f0f");
cfinder.addColorStop(1,"red");
ctx2.fillStyle = cfinder;
ctx2.fillRect(0,0,canvas2.width,canvas2.height);

ctx.fillStyle = "#FF0000";
img.onload = function() {
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
};
function rgbToHex(R, G, B) {
    return toHex(R) + toHex(G) + toHex(B)
}
//http://www.javascripter.net/faq/hextorgb.htm
function toHex(n) {
    n = parseInt(n, 10);
    if (isNaN(n)) return "00";
    n = Math.max(0, Math.min(n, 255));
    return "0123456789ABCDEF".charAt((n - n % 16) / 16) + "0123456789ABCDEF".charAt(n % 16);
}
function addListener(addTo,context) {
    addTo.addEventListener("click", function (event) {
        var x = event.pageX - addTo.offsetLeft;
        var y = event.pageY - addTo.offsetTop;
        var img_data = context.getImageData(x, y, 1, 1).data;
        var R = img_data[0];
        var G = img_data[1];
        var B = img_data[2];
        var rgb = R + ',' + G + ',' + B;
        console.log(rgb);
        // convert RGB to HEX
        var hex = rgbToHex(R, G, B);
        console.log(hex)
    });
}
addListener(canvas,ctx);
 addListener(canvas2,ctx2);

任何知道如何实现这一目标的人？

问候〜

自定义颜色选择器未选择正确的颜色

0 个答案: