javascript - 使用 jQuery 可拖动从 Canvas 获取像素颜色？

Question

我正在使用 this question 中的代码使用 jQuery UI 的可拖动功能使用色轮工具制作“颜色选择器”，但我遇到了麻烦。我似乎无法在 Canvas 图像上获得正确的位置，因为无论我将其拖动到色轮上的何处，我的代码始终返回 0, 0, 0 的 rgb 值。 这是我的代码:

    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 和 pageY 值相对于 Canvas 位置。以下是修订后的工作代码的相关部分:

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>