search

ghettovoice / vuelayers

Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/
MIT License
682 stars 230 forks source link

transparent background of png with vl-source-image-static? #430

Closed wendellwt closed 2 years ago

wendellwt commented 3 years ago

Hello,

I'm trying to display a colormapped png image using vl-source-image-static. I have the image in memory and set imgUrl = URL.createObjectURL(blob) and that part works great. The image shows up in the right place, the projections are correct, and the portions of the image that should have colors are colored. However, the entire image opaque, and nothing is transparent. Is there some way to manipulate the in-memory png image to force some color bands to be transparent?

On Linux I can use gdalinfo to view the color map, and I can see what color index items should be transparent. How can I tell VueLayers (or OpenLayers) to draw them as transparent?

Thank you, Wendell

ghettovoice commented 3 years ago

Hello @wendellwt , VueLayers (and OpenLayers too, as I know) doesn't provide any tools to manipulate images. Image layer/source renders exactly what it was provided, i.e. if png image was with some transparent parts - they will be transparent.

I don't know your current use case... but usually when I need dynamically toggle some raster layer parts - WMS service can help.

  1. it can return png with transparency,
  2. it can dynamically combine multiple layers
  3. all this operation is made by WMS server, not by the client browser. Sure it needs a spatial source to render images.

What do you actually have? Just a png with some features drawn? Or you have access to origin geospatial data from which this image was generated?

wendellwt commented 3 years ago

There is a WMS tile server operated by Iowa State. Tiled overlays works fine for single images, but I would like to develop some sort of process using VueLayers to animate several images over time. Full US images are available here, and using the data in the world file they can be georeferenced.

My plan is to retrieve several images using fetch/promise/async/await, and store them in an array. Then upon user request and using a timer, add them each individually as an overlay. I can use vl-source-image-static with a url of data:image/png;base64,iVBORw0K... But I can't get the image to be transparent. The png image has an indexed color table, and only about 15 color entries are actually used. I think if I can alter the image's color table to force all of the other color entries to be transparent, it should work, right?

Suggestions would be welcome. Thank you again for developing VueLayers!

wendellwt commented 3 years ago

BTW, png-chunks-extract and png-chunks-encode work great for inserting the necessary tRNS chunk inside a png image to make it transparent. Now all I need to do is get the animation sequencing working, but that seems like it will be the easy part.

ghettovoice commented 3 years ago

Hmm, pngs that they provide in the "Geo-referenced Images:" table are all have black background and not transparent. Also I have check what they provide by WMS/TMS services: transparent png's without black bg but seems like there is no possibility to request only parts of this layer.

So I guess manual manipulation with png is the only way to achieve your goal

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.