From b91794fa610da3fc2c06e558bc941f8f1c5807a6 Mon Sep 17 00:00:00 2001 From: Starbeamrainbowlabs Date: Thu, 2 Apr 2020 22:13:46 +0100 Subject: [PATCH] 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 --- client_src/js/Helpers/Colourizer.mjs | 46 +++++++++++++++++++++++++++ client_src/marker-old.png | Bin 0 -> 7337 bytes 2 files changed, 46 insertions(+) create mode 100644 client_src/js/Helpers/Colourizer.mjs create mode 100644 client_src/marker-old.png diff --git a/client_src/js/Helpers/Colourizer.mjs b/client_src/js/Helpers/Colourizer.mjs new file mode 100644 index 0000000..38a4a53 --- /dev/null +++ b/client_src/js/Helpers/Colourizer.mjs @@ -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; diff --git a/client_src/marker-old.png b/client_src/marker-old.png new file mode 100644 index 0000000000000000000000000000000000000000..c31e6e34dbb796d36f1dee21901c8ba216bfecf2 GIT binary patch literal 7337 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