In the XP Editor in Change Fog Color Tone, its obvious to me that it uses an RGBA value.
If I wanted to simulate the effect in CSS / Javascript using a filter, what would I need need to do to use to achieve the same effects on regular images or a Canvas image?
*cough cough* Blizz?
Tone != Color
Tone has Gray instead of Alpha. The idea is you're changing the graphic's luminance. It's easier to think about changing a graphic to grayscale--how do you determine what shade of gray a colored pixel should have?
When I was working on an editor myself, I ended up writing a DLL to do this calculation.
/*
The four parameters tone_r, tone_g, tone_b, and tone_gray represent the integer values entered into "Change Fog Color Tone".
pixels is just a pointer to the graphic itself
length is how many pixels the graphic has (i.e. width * height)
*/
void DLL_EXPORT ToneCalc(long * pixels, long length, int tone_r, int tone_g, int tone_b, int tone_gray)
{
// Iterate through every single pixel in the graphic
for (int i = 0; i < length; ++i)
{
long pixel = pixels[i];
// Break up the hex color code to individual variables between 0-255
int alpha = (pixel & 0xFF000000) >> 24;
int red = (pixel & 0xFF0000) >> 16;
int green = (pixel & 0xFF00) >> 8;
int blue = (pixel & 0xFF);
// The algorithm...
int gray = (red * 299 + green * 587 + blue * 114) / 1000;
int factor = (255 - tone_gray) * 1000 / 255;
red = std::max(std::min((red - gray) * factor / 1000 + gray + tone_r, 255), 0);
green = std::max(std::min((green - gray) * factor / 1000 + gray + tone_g, 255), 0);
blue = std::max(std::min((blue - gray) * factor / 1000 + gray + tone_b, 255), 0);
// Replace the pixel color
pixels[i] = blue + (green << 8) + (red << 16) + (alpha << 24);
}
}
I can't remember how I eventually came up with this algorithm, want to say some Stackoverflow answer.
Thanks!
I was figuring this would be more complicated than one of the existing CSS image filters. The results almost look like an HSL value as the S for Saturation might be applicable? I wasnt really planning on doing this on a pixel by pixel redraw, rather apply to the whole image.
Do you think an HSL filter might be better? If anything I would rather have MORE functionality rather than less...
---
Edit: Got it, problem solved.
So yes, it IS possible to use an SVG with a Raster Image, apply an SVG filter (such as feColorMatrix), then draw that filtered image to an HTML5 Canvas element.
NOTE: I suck at SVG.
For anyone else that ends up here, the trick is to create a new Image, set an Event Listener for onload on the new Image() to handle drawing to your canvas, then set the matrix values on the feMatrix element, then set the image source (img.src = 'data:image/svg+xml;base64,' + btoa(svg.outerHTML).replace(/\=+$/, ''); ) to a base64 encoded string of your full SVG element (svg.outerHTML).
It appears to me so far that the onload event listener is needed as even though the data src may be base64 encoded, it appears to be considered as "not fully loaded" until the render with filters is complete.
It may also be necessary to wrap ctx.clearRect and ctx.drawImage in a setTimeout call. In my situation, I did not need it.
INLINE SVG HTML (contains a base64 data source for a Color Chip)
<svg id="colorChipSVG" width="73" height="118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="colormatrix" x="0" y="0" width="1" height="1">
<feColorMatrix id="feMatrix" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
<feColorMatrix id="fs" type="saturate" values="1"/>
</filter>
<image id="svgImg" width="73" height="118" filter="url(#colormatrix)" xlink:href="data:image/png;base64,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" />
</svg>
Javascript
function drawColorChip(){
let tempImg = new Image();
tempImg.onload = function(){
ctx.clearRect(0, 0, ctx.width, ctx.height);
ctx.drawImage(tempImg, 0, 0, 73, 118);
};
tempImg.src = 'data:image/svg+xml;base64,' + btoa(svg.outerHTML).replace(/\=+$/, '');
}
That is exactly what it is; it's actually the YIQ format as Google points out.
I don't really know what constitutes as an "HSL filter". If that's just another way of saying a pixel shader, then sure use one (though I'm doubtful one exists). That is basically what the code I shared is after all.
Well, I am half way there, without a dll, or going pixel by pixel.
Possible solution is SVG. SVG can be drawn to a canvas!
What I did was to use a feColorMatrix filter to the SVG.
I am having some trouble loading the image source graphic into Blob. I can load the SVG by itself with the external image just fine and the effects appear to be the same as Color Tone in XP. When I try to make a Blob out of the SVG, it doesnt use the Image Source Data.
Any suggestions to convert the SVG to an Image so I can draw that Image to the canvas?
<svg xmlns="http://www.w3.org/2000/svg" id="changeMapFogToneSVG" class="changeMapFogTone">
<filter id="svgCssFilter">
<feColorMatrix id="svgMatrix" type="matrix"
values="1 0 0 0 1
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0">
</feColorMatrix>
</filter>
<img id="svgImg" class="changeMapFogToneSvgFilter" src="data:image/png;base64,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" />
</svg>
img = new Image();
let domurl = window.URL || window.webkitURL || window;
let svgTemp = new Blob([svg], {type: 'image/svg+xml'});
let url = domurl.createObjectURL(svgTemp);
img.src = url;