getimagedata - colorpicker - problem

[LEF0D44]

Hi to all . Please help hereafter... I am trying either with the cursor or by scanning the photo you see to get the color per pixel. Sometimes it shows the color black as if there is no photo. Other times it gives me the wrong color (I don't know if it's the fault of the"alpha" ) and actually 2 or more colors in addition to every color it reads. Please check it out and if needed I will provide more information soon. Thanks

var pin_argb=[]
var st="";
var txt=this.txt;
var c =canvas.getContext('2d');
/* for (var i=320;i<=360;i++){
var p = c.getImageData(i, 200, 1, 1).data;
st+=p;
txt.text=st;
//alert(p);
}
*/

function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

//alert(rgbToHex(0, 51, 255)); // #0033ff

var shape = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawRect(5,5,100,100));
//this.addChild(shape);

var myInterval = setInterval(setColor, 1000);
var ii=0;
var jj=270;
var that=this;
function setColor() {
jj++;
//var p = c.getImageData(ii, 200, 1, 1).data;
var c = canvas.getContext('2d');
var p = c.getImageData(jj, 2, 1, 1).data;
var rr=p[1]
//st=p;
//txt.text=ii+" = "+st+" r="+rr+" "+ p[2];
that.removeChild(shape);
c_color=rgbToHex(p[1], p[2], p[3]);
pin_argb.push(c_color)
//st+=c_color;
//st+=",";
//txt.text=st;
// console.log(st);
shape = new createjs.Shape(new createjs.Graphics().beginFill(c_color).drawRect(jj,5,1,10));
that.addChild(shape);
shape.alpha=p[0]
if (jj>470){
stopColor();
}

}

function stopColor() {
alert(pin_argb.length)
clearInterval(myInterval);
}

[kglad]

you're color shifting.  i think you want 

c_color=rgbToHex(p[0], p[1], p[2]);

[LEF0D44]

Good morning. The problem remains. It keeps returning the black color. I have see applications that do it but not in Animator CC. I'm trying to find solutions. Thanks anyway . 

[LEF0D44]

hello.

[cid:6aef1379-de2a-46bb-b7f4-2dc36e6d75d8]
i have a mirror bitmap at y= 350


[cid:36f6604d-8fc6-4a0c-b321-08ad9ed82d24]

function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
      //alert(r)
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
var that=this;
var c_c = canvas.getContext('2d');
var shape_c = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawCircle(0,-30,10));
that.addChild(shape_c);

visvector_l.on("pressup", function(evt){
      
var p = thatis.globalToLocal(evt.stageX, evt.stageY);
evt.currentTarget.x = evt.currentTarget.x;      
evt.currentTarget.y = evt.currentTarget.y;      
stopf.x= evt.currentTarget.x; 
      
      var p_c = c_c.getImageData(evt.currentTarget.x, 350, 1, 1).data;
      var c_color=rgbToHex(p_c[0], p_c[1], p_c[2]);
      that.removeChild(shape_c);
       shape_c = new createjs.Shape(new createjs.Graphics().beginFill(c_color).drawCircle(evt.currentTarget.x,350,10));
      that.addChild(shape_c);
      that.c_color_txt.text=c_color;
      
},this)     

[kglad]

if you still have a problem it's because you're doing something else wrong.  the solution i gave is correct.

[LEF0D44]

Thank you very much for your help. But I still haven't found the problem. I don't know if it's because I'm loading the bitmap  from the fla  library and not from a file. Also in tests I see how it reads the colors when the image is in the movieclip but with problems ... I don't know.... I'm trying... Thank you again.

[kglad]

try another bitmap. i loaded one and used some of your code to pick and reproduce colors and it worked well.

[LEF0D44]

https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

[kglad]

what did you mean to convey with that link?

[LEF0D44]

It might help to find a more general and better solution.

[kglad · Accepted solution]

i have no problem.  works for me: https://www.kglad.com/Files/forums/color_picker/