I am new to data visualization and web development and I am trying to alter this image using camanjs. After I alter this image, I wish to set it up as the background for a map which is using leafletjs. I am not exactly sure how to approach this and would like some help.
Is there some way to get the image url from an image object or saving the image to file, and then using the url of saved image as background for the leaflet object? These are the only solutions I can think of but there might be a better way
Here is how I alter the image
Caman('#canvas', function () {
this.colorize(25, 180, 200, 20);
this.render();
});
And this is how I set up the map
// initialize the map
var map = L.map('map', {
crs: L.CRS.Simple
});
var bounds = [
[0, 0],
[300, 300]
];
var image = L.imageOverlay(*ALTERED IMAGE URL HER*, bounds, {
opacity: 0.5
}).addTo(map);
map.fitBounds(bounds);
I do not actually know what to do next and how to get the altered image to be the leaflet map background