Implement a colourizer algorithm, but there's a better way of doing it with SVG.

Plan:
 - Fetch SVG
 - Find + replace special marker with colour
 - Generate data URL (See btoa())
 - Use it in a Marker in Leaflet
This commit is contained in:
Starbeamrainbowlabs 2020-04-02 22:13:46 +01:00
parent ef9424650e
commit b91794fa61
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
2 changed files with 46 additions and 0 deletions

View File

@ -0,0 +1,46 @@
"use strict";
function colourize(image, r, g, b) {
let canvas = document.createElement("canvas"),
context = canvas.getContext("2d");
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
let image_data = context.getImageData(
0, 0,
canvas.width, canvas.height
),
buf = new ArrayBuffer(image_data.data.length),
view = new Uint32Array(buf),
view8 = new Uint8ClampedArray(buf);
console.log(`Canvas: ${canvas.width}x${canvas.height}, image data: ${image_data.width}x${image_data.height}`);
let count = 0;
for(let y = 0; y < image_data.height; y++) {
for(let x = 0; x < image_data.width; x++) {
let loc = y*image_data.width + x;
//if(image_data.data[loc*4 + 3] == 0) continue
view[loc] =
(image_data.data[loc*4 + 3] << 24) | // Alpha
((b+image_data.data[loc*4 + 2])/2 << 16) | // Blue
((g+image_data.data[loc*4 + 1])/2 << 8) | // Green
(r+image_data.data[loc*4])/2; // Red
count++;
}
}
console.log(`Changed ${count} / ${canvas.width*canvas.height} pixels`);
image_data.data.set(view8);
context.putImageData(image_data, 0, 0);
return canvas.toDataURL();
// let image_data = context.getImageData()
}
export default colourize;

BIN
client_src/marker-old.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB