Reinstate support for png and jpg images for the UserSvg Tool including image clipping and masking

[AmoebeLabs]

The Problem To Be Solved

With the implementation of the SVG injector - which still isn't 100% - support for png and jpg images has gone. This was not meant to be, of course, so reinstate the support for png and jpg images.

Additionally, add support for image clipping and masting for png and jpg images (not for SVG images)

Additional background:

Clipping, and to a lesser degree masking is required if support for png/jpg is added again, as we all want the image to fit some circle or rectangle. Therefore, a simple clipping rectangle with configurable height/width and corners is all we need at this point!

Related Issues (if any)

(Optional): Suggested Solution

By checking the file extension, the render path can be selected. Not a big deal. Just a few lines of JavaScript...

Let the user specify the dimensions of the clip-path, and use that exact config for the mask. This way it is predictable, and the user needs only - if he/she wants - to specify the mask in the styling settings.

Rectangle clip path (identical to rectex tool!!. Yes! I did some copy/paste...):

            clip_path:
              position:
                cx: 50
                cy: 50
                height: 40
                width: 40
                radius:
                  all: 10

Mask styling:

  styles:
    mask:
      fill: <>

(Optional): Alternative Solutions