change particular area of an image and fill color in that area

Question

Edit Png Image For E.g change particular area and fill color in that area.

I want to change the color of an image only selected area. Like the first user selects a

Answer 1

Edit: Its Possible to get the image data from a canvas and change its pixels. You could also search for algorithms for drawing lines, circles and etc. But the ideia is still the same (Get a canvas image, Edit it, then save it).

Since you are using AngularJS, you can create a directive that gets the color as input and plots that color on a specific area of the image. Then you can use the canvas.toDataURL() or canvas2image() method to parse the canvas into an image with the desired format.

Check the MDN docs for this method here https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCanvasElement/toDataURL

I have made a small code snippet just to give you an ideia. I think that the color picker feature is a step that you can easely implement and deliver as input to your canvas directive. I hope that helps!

function hexToRgb(color) {
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    color = color.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });
    
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : {
        r: 0,
        g: 0,
        b: 0
    };
}

function colorImage(imgId,hexaColor) {
    // create hidden canvas (using image dimensions)
    var imgElement = document.getElementById(imgId);
  
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.width;
    canvas.height = imgElement.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement,0,0);
    
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    
    var data = imageData.data;
  
    // convert image to grayscale
    var rgbColor = hexToRgb(hexaColor);
    //console.log(rgbColor);
    
    for(var p = 0, len = data.length; p < len; p+=4) {
        //if(data[p+3] == 0)
        //   continue;
        data[p + 0] = rgbColor.r;
        data[p + 1] = rgbColor.g;
        data[p + 2] = rgbColor.b;
        //data[p + 3] = 255;
    }
    ctx.putImageData(imageData, 0, 0);

    // replace image source with canvas data
    imgElement.src = canvas.toDataURL();
}

// changing color of capsule on select event
document.getElementById('sel_top').onchange = function(){
    colorImage('img_top', this.value);
}
document.getElementById('sel_bottom').onchange = function(){
    colorImage('img_bottom', this.value);
}

$('input[type="color"]').on("change", function(color) {
      console.log(this.value);
      var colorHex = this.value;
   
      colorImage('img_top',colorHex);
 });

img.color-img {
	position: absolute;
}

top color: 
		
			select
		    red
		    green
		    blue
		    yellow    
		
		bottom color: 
		
		    select
		    red
		    green
		    blue
		    yellow