Convert color RGBA to HEXADECIMAL with javascript

Question

Convert color RGBA to HEXADECIMAL with javascript

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello friends, I have this script where I get the rgba color of an image, but I need to convert it to hexadecimal and save it in a variable

const img= document.getElementById('imagen');
const output= document.getElementById('output');

img.addEventListener('click', function (e) {
  let ctx;
  if(!this.canvas) {
      this.canvas = document.createElement('canvas');
      this.canvas.width = this.width;
      this.canvas.height = this.height;
      ctx=this.canvas.getContext('2d');
      ctx.drawImage(this, 0, 0, this.width, this.height);
  } else {

    ctx=this.canvas.getContext('2d');

  }

  const pixel = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;

  output.innerHTML ='R: ' + pixel[0] + '<br>G: ' + pixel[1] +
      '<br>B: ' + pixel[2] + '<br>A: ' + pixel[3];

javascript jquery jquery-ui

asked by Jcastillovnz 18.10.2018 в 00:15

source

2 answers

Generate a client in a web service from a pom.xml file with maven, axis 2 and elcipse Juno Images in databases and Laravel 5.6

score 0 · Answer 1

You can use toString(16) like this:

const gatete= document.getElementById('gato');
const output= document.getElementById('output');

gatete.addEventListener('click', function (e) {
  let ctx;
  if(!this.canvas) {
      this.canvas = document.createElement('canvas');
      this.canvas.width = this.width;
      this.canvas.height = this.height;
      ctx=this.canvas.getContext('2d');
      ctx.drawImage(this, 0, 0, this.width, this.height);
  } else {
    ctx=this.canvas.getContext('2d');
  }
  const pixel = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;
        
  output.innerHTML ='#' + pixel[0].toString(16) + pixel[1].toString(16) +
       pixel[2].toString(16);
                
});

img,pre {
display: inline-block;
}

<img id="gato" src="http://placekitten.com/300/200" crossorigin="anonymous">

<pre id="output"></pre>

score 0 · Answer 2

When you get the color rgba call the function rgba2hex () that I put below:

function rgba2hex(orig) {
  var a, isPercent,
    rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
    alpha = (rgb && rgb[4] || "").trim(),
    hex = rgb ?
    (rgb[1] | 1 << 8).toString(16).slice(1) +
    (rgb[2] | 1 << 8).toString(16).slice(1) +
    (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // Multiplicación antes de convertir a HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function test(colorcode) {
  console.log(colorcode, rgba2hex(colorcode));
}

test("rgba(0, 0, 0, 0.74)");
test("rgba(0, 0, 0, 1)");
test("rgba(0, 0, 0, 0)");
test("rgba(0, 255, 0, 0.5)");

The rgba() notation is expressed as a value of 0 ~ 1, you must multiply it by 255 before attempting to convert it to its HEX form.

But keep in mind that this is just one of the rgba notations and that, for example, it will fail with the percentage-based notation. Note also that all browsers do not support the HEX notation of RGBA, so you may prefer another method to convert their values depending on what you want to do with them.

Source .