| license: mit |
Changing a particular color of a png file. If you use external svg instead, see: https://stackoverflow.com/questions/28652648/how-to-use-external-svg-in-html https://stackoverflow.com/questions/28213417/how-to-set-a-external-svg-color-in-html-using-css
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body{ background-color: ivory; } | |
| canvas{border:1px solid red;} | |
| </style> | |
| </head> | |
| <body> | |
| <p>Example shifting color Hue with .getImageData</p> | |
| <p>(Original: left, Recolored: right)</p> | |
| darkred: #C02126 rgb(192, 33, 38) | |
| lightred #BC9FA1 rgb(188, 159, 161); | |
| grey: rgb(204, 204, 204) | |
| <canvas id="canvas" width=800 height=300></canvas> | |
| <script> | |
| var canvas = document.getElementById("canvas"); | |
| var ctx = canvas.getContext("2d"); | |
| var img = new Image(); | |
| img.crossOrigin = "anonymous"; | |
| img.onload = start; | |
| img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Bavaria_AB_%28district%29.svg/300px-Bavaria_AB_%28district%29.svg.png"; | |
| //"https://upload.wikimedia.org/wikipedia/commons/f/f9/Bavaria_AB_%28district%29.svg" | |
| function start() { | |
| ctx.drawImage(img, 0, 0); | |
| ctx.drawImage(img, 400, 0); | |
| // shift blueish colors to greenish colors | |
| recolorPants(-.33); | |
| } | |
| function recolorPants(colorshift) { | |
| var imgData = ctx.getImageData(400, 0, canvas.width, canvas.height); | |
| var data = imgData.data; | |
| for (var i = 0; i < data.length; i += 4) { | |
| red = data[i + 0]; | |
| green = data[i + 1]; | |
| blue = data[i + 2]; | |
| alpha = data[i + 3]; | |
| // skip transparent/semiTransparent pixels | |
| if (alpha < 200) { | |
| continue; | |
| } | |
| var hsl = rgbToHsl(red, green, blue); | |
| var hue = hsl.h * 360; | |
| // change blueish pixels to the new color | |
| if (hue > 200 && hue < 300) { | |
| var newRgb = hslToRgb(hsl.h + colorshift, hsl.s, hsl.l); | |
| data[i + 0] = newRgb.r; | |
| data[i + 1] = newRgb.g; | |
| data[i + 2] = newRgb.b; | |
| data[i + 3] = 255; | |
| } | |
| // change blueish pixels to the new color | |
| if (red === 192) { // 192, 33, 38 => rgb(71,78,102); | |
| var newRgb = hslToRgb(hsl.h + colorshift, hsl.s, hsl.l); | |
| data[i + 0] = 71; | |
| data[i + 1] = 78; | |
| data[i + 2] = 102; | |
| data[i + 3] = 255; | |
| } | |
| if (red === 188) { // rgb(188, 159, 161)=> rgb(204, 204, 204) | |
| var newRgb = hslToRgb(hsl.h + colorshift, hsl.s, hsl.l); | |
| data[i + 0] = 204; | |
| data[i + 1] = 204; | |
| data[i + 2] = 204; | |
| data[i + 3] = 255; | |
| } | |
| } | |
| ctx.putImageData(imgData, 400, 0); | |
| } | |
| function rgbToHsl(r, g, b) { | |
| r /= 255, g /= 255, b /= 255; | |
| var max = Math.max(r, g, b), | |
| min = Math.min(r, g, b); | |
| var h, s, l = (max + min) / 2; | |
| if (max == min) { | |
| h = s = 0; // achromatic | |
| } else { | |
| var d = max - min; | |
| s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | |
| switch (max) { | |
| case r: | |
| h = (g - b) / d + (g < b ? 6 : 0); | |
| break; | |
| case g: | |
| h = (b - r) / d + 2; | |
| break; | |
| case b: | |
| h = (r - g) / d + 4; | |
| break; | |
| } | |
| h /= 6; | |
| } | |
| return ({ | |
| h: h, | |
| s: s, | |
| l: l, | |
| }); | |
| } | |
| function hslToRgb(h, s, l) { | |
| var r, g, b; | |
| if (s == 0) { | |
| r = g = b = l; // achromatic | |
| } else { | |
| function hue2rgb(p, q, t) { | |
| if (t < 0) t += 1; | |
| if (t > 1) t -= 1; | |
| if (t < 1 / 6) return p + (q - p) * 6 * t; | |
| if (t < 1 / 2) return q; | |
| if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; | |
| return p; | |
| } | |
| var q = l < 0.5 ? l * (1 + s) : l + s - l * s; | |
| var p = 2 * l - q; | |
| r = hue2rgb(p, q, h + 1 / 3); | |
| g = hue2rgb(p, q, h); | |
| b = hue2rgb(p, q, h - 1 / 3); | |
| } | |
| return ({ | |
| r: Math.round(r * 255), | |
| g: Math.round(g * 255), | |
| b: Math.round(b * 255), | |
| }); | |
| } | |
| </script> | |
| </body> |