mirror of
https://github.com/ConnectedHumber/Air-Quality-Web
synced 2024-11-25 06:53:00 +00:00
Starbeamrainbowlabs
b91794fa61
Plan: - Fetch SVG - Find + replace special marker with colour - Generate data URL (See btoa()) - Use it in a Marker in Leaflet
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
"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;
|