1

how can i change the color of an image that has a transparent background? i made a library that has images to choose from all the images are black with a transparent background. i want to be able to change the black to any color that the user chooses. i would need a JavaScript code that will allow to change color on click.

I am using .foo to change the color, what i have below are the codes that im using for the image but i cant seem to find a code that will allow me to change the color of the image using the color boxes i apologize for not putting the actual image i wanted to keep it as simple as possible if i had posted the images it would have been a long and confusing code. i would like to be able to use class (modal-contant) 

$('img').on('click', function() {
    $('#fotos').append('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src') + '"/></div>');
    $('.imgdrag').draggable();
    $('#fotos').droppable();
    $('.modal-content').resizable();        
});
.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.black {
  background: black;
}.red {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

**HTML for the image to display**

<div id="fotos" class="bananas"><img class="modal-content" id="imgdisplay" /></div>


**HTML for the foo color boxes to change the color of the image**

<div id="colour">
    <div value="black" class="foo black" data-color="black">
    </div><div class="foo red" data-color="red"></div>
</div>
M Hamza Javed
  • 1,269
  • 4
  • 17
  • 31
xcalliber
  • 305
  • 2
  • 6
  • 16
  • Take a look at this: http://stackoverflow.com/questions/29037023/how-to-calculate-required-hue-rotate-to-generate-specific-colour – Robby Cornelissen Feb 16 '17 at 04:27
  • Is your image an svg ? I can't see what "change the color of an image" would mean if the concerned image is not a monochromatic svg. – Eria Feb 16 '17 at 08:55

0 Answers0