Add a border to an image that created in open layers for angular 8

Question

I am programming in Angular 8 with open layer (in package.json ol is version ^5.3.6).

When I create a new style for an image, I do something like:

const myIcon = new Style({
image:new Icon({
   anchor:[0,0],
   anchorOrigin: IconOrigin.BOTTOM_LEFT,
   anchorXUnits:IconAnchorUnits.PIXELS,
   anchorYUnits: IconAnchorUnits.PIXELS,
   color: rgb(128,128,128),
   src: 'myimage.svg'
 })
});

The color need to be grey. When the image is on a dark (black or grey image), the image is barely seen.

So, I want to draw a contour arround the image, with white color (How can I compute a good negative contour, because the negative of 128 is 128).

The image is any image, such a flower. It is a transparent image with border as the shape of the flower, so I need to draw a non-rectangle contour.

Also the image is an Icon object, based on a svg image

Is there another good solution, except drawing contour arround the image?

How can I add a contour arround the image?

You will probably need to update the image in canvas (similar to https://stackoverflow.com/questions/24039599/how-to-add-stroke-outline-to-transparent-png-image-in-javascript-canvas) then use that for the icon — Mike, Jul 23 '21 at 12:53

score -1 · Accepted Answer · answered Jul 21 '21 at 08:28

An OpenLayers Style can also consist of an Array of multiple styles, the first item in the array will get rendered first, therefore is on the bottom.

One possibility is to make a rectangle underneath your image with the correct dimensions, this is shown here: https://openlayers.org/en/latest/examples/regularshape.html

The style would look something like this:

const styles = [
  new Style({
    image: new RegularShape({
      stroke: new Stroke({
       color: 'white',
       width: 5
      }),
      points: 4,
      angle: 0,
      // adjust these numbers according to your image 
      radius: 10 / Math.SQRT2,
      radius2: 10,
      scale: [1, 0.5],
    })
  }),
  myIcon
]

Not sure about negative contours, though generally i would avoid anything but solid coloured contours, maps are already very komplex graphics on their own. You can however make the Fill and the Stroke of the RegularShape with an rgba-color, so their appear semi-transparent.

The image is any image, such a flower. It is a transparent image with border as the shape of the flower, so I need to draw a non-rectangle contour. Same as the shape of "flower", i.e. or any non-rectangle contour. — Eitan, Jul 22 '21 at 18:35
I need a better soltion, which any image, as I asked for a svg image based on icon object, which need a contour, which is not a rectangle, but a contour arround the icon object. — Eitan, Jul 23 '21 at 04:29

Add a border to an image that created in open layers for angular 8

1 Answers1