使用 jQuery 可拖动从 canvas 获取像素颜色？

Question

我正在使用 this question 中的代码使用 jQuery UI 的可拖动功能通过色轮工具制作 'color picker'，但我遇到了问题。我似乎无法在 canvas 图像上找到正确的位置，因为我的代码总是 returns rgb 值 0、0、0，无论我将它拖到色轮上的什么位置。这是我的代码：

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var canvasWidth = $('#canvas').width();

    function getColor(e) {
        console.log(e);
        var pos = findPos(document.getElementById('currentSelector'));
        console.log(pos)

        x = pos.x;
        y = pos.y;

        var coord = "x=" + x + ", y=" + y;
        var canvasRender = document.getElementById('canvas').getContext('2d');
        var rgba = canvasRender.getImageData(x, y, 1, 1).data;


        var hex = "#" + ("000000" + rgbToHex(rgba[0], rgba[1], rgba[2])).slice(-6);

        var rgb = [];
        for (var i = 0; i < rgba.length - 1; i++){
            var temp = rgba[i];
            rgb[i] = temp;
        };


        console.log(rgb);

        setWorkingColor();

    };


    function findPos(obj) {
        var curleft = 0, curtop = 0;
        if (obj.offsetParent) {
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
            return { x: curleft, y: curtop };
        }
        return undefined;
    }

    function rgbToHex(r, g, b) {
        if (r > 255 || g > 255 || b > 255)
            throw "Invalid color component";
        return ((r << 16) | (g << 8) | b).toString(16);
    }

$('.selectors-container').on('drag', '#currentSelector', function(e, ui){
    getColor(e)
});

您还可以在此处查看问题的实时预览：https://adobecolor-shambolaz.c9.io/

感谢您的帮助！

编辑：所以我的代码的问题是我将选择器元素而不是 canvas 传递给 findPos() 函数，并且需要将 x 和 y 变量更改为 pageX 和拖动事件相对于 canvas 位置的 pageY 值。这是修改后的工作代码的相关部分：

function getColor(e) {
    console.log(e);
    var pos = findPos(canvas);
    console.log(pos)
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;

    var coord = "x=" + x + ", y=" + y;
    var canvasRender = document.getElementById('canvas').getContext('2d');
    var rgba = canvasRender.getImageData(x, y, 1, 1).data;

    var rgba_data = context.getImageData(x, y, 1, 1).data;
    var rgba = rgba_data;
    console.log(rgba)

    var hex = "#" + ("000000" + rgbToHex(rgba[0], rgba[1], rgba[2])).slice(-6);

    var rgb = [];
    for (var i = 0; i < rgba.length - 1; i++){
        var temp = rgba[i];
        rgb[i] = temp;
    };


    console.log(rgb);

    setWorkingColor();
};

感谢 markE 的回复。

Answer 1

在色轮上挑选颜色的简单示例：

提示：

请确保将图像托管在与网页相同的域中，否则 getImageData 将无法正常工作。
在您的应用程序开始时获取所有像素颜色数据。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

var $color=$('#color');
var data,imageWidth;

var colors=new Image;
colors.crossOrigin="anonymous";
colors.onload=function(){
  canvas.width=imageWidth=colors.width;
  canvas.height=colors.height;
  ctx.drawImage(colors,0,0);
  data=ctx.getImageData(0,0,canvas.width,canvas.height).data;
  $("#canvas").mousemove(function(e){handleMouseMove(e);});
}
colors.src="https://dl.dropboxusercontent.com/u/139992952/multple/colorWheel.jpg";


function handleMouseMove(e){
  e.preventDefault();
  e.stopPropagation();
  x=parseInt(e.clientX-offsetX);
  y=parseInt(e.clientY-offsetY);

  var offset=(imageWidth*y+x)*4;
  var red = data[offset];
  var green = data[offset+1];
  var blue = data[offset+2];
  var alpha = data[offset+3];

  $color.text("r:"+red+", g:"+green+", b:"+blue+", a:"+alpha);
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4 id="color">RGB under mouse:</h4>    
<canvas id="canvas" width=300 height=300></canvas>

使用 jQuery 可拖动从 canvas 获取像素颜色？

Get pixel color from canvas using jQuery draggable?

javascript

jquery-ui

canvas

color-picker

pixel