Note that this project is currently being developed and not yet complete. The functionality you are seeing is a demonstration of what has been completed thus far. More functionality is being added over time.
-
From the main interface, drag a file into the box, click the box to select a file, or provide a URL to load an image:
The example used in this walkthrough is stored at /images/where-owls-know-my-name.jpg:
-
From the main interface, you can perform the following:
-
Adjust the resolution and ratio lock of the container and image. By default, the container has an unlocked ratio, and the image has a locked ratio.
-
Adjust the filters, border, style, and alignment configuration of the container and image. Where you see the blue question mark icons, you can hover (or tap on mobile) to see details about that entry.
-
-
Providing the following values will result in the image that follows:
-
Container Filters:
blur(20px) brightness(1.8) hue-rotate(90deg) contrast(1.4) -
Container Border:
4px solid black -
Container Style:
rounded -
Image Filters:
hue-rotate(90deg) brightness(1.2) contrast(1.2) -
Image Border:
4px solid black -
Image Style:
rounded
-
- link test: Where Owls Know My Name
- link CORS error: GitHub User Content
- Build Export Functionality
- Ensure styles are applied to isolated DOM element. Adapt strategy.