0

To explain my example first is the original image.
Edit: Assuming it is placed on canvas using base64 data.

Input

and this is the output with color applied is #ED7600

enter image description here

Now the image is converted into single shade. I have tried different canvas built in compositions. But none of them worked. A color manipulation algorithm can do it. I have some starter code so everyone may know the inputs.

let color_code = "#ED7600",
    imageData = ctx.getImageData(0, 0, c.width, c.height);
    data = imageData.data; // This is the color data I want to manipulate
for (var i = 0; i < data.length; i += 4) {
    // Awesome algorithm goes here                       
}

I have already tried different solutions from stack overflow. But nothing exactly changed a multi color image into a single shade color. I am creating it for a printing company and in their business, single color print costs less so customer can have an option to see how it will look.

Hamza Dhamiya
  • 1,269
  • 1
  • 10
  • 17
  • 3
    You don't need to access pixels, Just use the 2D API. Draw the image on a canvas, then set fill color to the color you want, set `globalCompositeOperation` to `"hue"` and fill a rect over it. Eg `ctx.drawImage(img,0,0); ctx.fillStyle = ""#ED7600"; ctx.globalCompositeOperation="hue"; ctx.fillRect(0,0,image.width,img.height);` to restore comp to default `ctx.globalCompositeOperation="source-over"; ` – Blindman67 Aug 19 '20 at 23:02
  • 1
    i was typing an extremely complicated answer when I saw you post this, you should post this as an answer not a comment. – VeryGoodDog Aug 19 '20 at 23:11

0 Answers0