Resolution & Example
The issue has been resolved, and here is a JSFiddle demo for reference.
###Advantages
- User-friendly interface.
- Available color selection in all JavaScript recognized formats.
- Customizable icon colors excluding white.
###Drawbacks
Dependent on the tinycolor.js library to support various color formats. (Yet, it can be eliminated with self-created conversion functions)
Operates solely on IE9+ due to utilization of HTML5 canvas. (However, programming for IE always poses challenges).
Requires source images to reside on the same server as canvas cannot fetch from cross-origin sources, using Data URI for demonstration purposes. (There is a workaround available if desired).
##HTML Markup
<input type="text" value="#669dbb">
<button>Alter color</button>
<img src="data:image/png;base64,(..)">
Straightforward structure - an <input> field for selecting the target color, and a <button> for executing the changes. (Initial value mimics the light blue shade present in your default icon).
##JavaScript Logic
var img = document.querySelector("img");
var button = document.querySelector("button");
var text = document.querySelector("input");
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
button.onclick = function () {
updateColor(text.value);
};
updateColor = function (inputColor) {
canvas.setAttribute("width", img.width);
canvas.setAttribute("height", img.height);
context.drawImage(img, 0, 0);
var dataObject = context.getImageData(0, 0, canvas.width, canvas.height);
var data = dataObject.data;
for (var i = 0; i < data.length; i += 4) {
var r = data[i],
g = data[i + 1];
b = data[i + 2];
a = data[i + 3];
var notTranslucent = a != 0;
var nonBackground = ( notTransparent && r != 255 && g != 255 && b != 255 );
if (nonBackground) {
var input = tinycolor(inputColor);
var rgb = input.toRgb();
data[i] = rgb.r;
data[i + 1] = rgb.g;
data[i + 2] = rgb.b;
data[i + 3] = a;
}
}
context.putImageData(dataObject, 0, 0);
img.src = canvas.toDataURL();
}
##Elucidation
Focusing primarily on the modifyColor() function, while other code segments handle preparatory tasks.
- Aligning width & height of
<img> and <canvas>.
- Drawing image onto the canvas.
- Extracting pixel array data from entire canvas.
- Examining data elements individually to retrieve pixel values.
- Array[0] = Red
- Array[1] = Green
- Array[2] = Blue
- Array[3] = Alpha.
- Determining if the pixel is part of the background by checking opacity and presence of white.
- Applying selected color transformation to pixels.
- Updating canvas with modified data for rendering.
- Converting canvas to Data URI, connecting it back to
<img>.
#Additional Information
To avoid intensive setup processes, a library named AmazingIcon.js (Github) is provided for achieving similar outcomes:
##Head Section
<script src=tinycolor.js></script>
<script src=amazingicon.js></script>
##Body Section
<a class="amazingIcon" href="some-url" data-src="icon-image-url">icon-label</a>
Incorporating the data-src attribute allows creation of pseudo-custom attributes.
##Javascript Operations
AmazingIcon.parseDocument();
AmazingIcon.hover(function(icon,ev){
icon.setColor("lightblue");
});
Running AmazingIcon.parseDocument() transforms designated anchors with amazingIcon class into Amazing Icons.
The AmazingIcon.hover(callback) feature enables hover events for all amazing icons, providing both (icon,event) parameters for customized actions. (Further information in documentation).
##Style Sheet Specifications
.AmazingIconObject{
display: inline-block;
vertical-align: top;
text-align: center;
margin-right: 5px;
word-wrap: break-word;
width: 100px;
font-family: Verdana;
font-weight: bold;
color: lightcoral;
margin-right: 5px;
text-decoration: none;
}
For detailed insights regarding functionality, modifications or reproduction, refer to the Github repository for complete freedom in adjustments.
##Demonstration Preview
Due to limitations on showcasing with non-crossorigin content, visual depiction is presented for illustrative purpose.
Trusting this elucidates matters effectively. Until next time!