SebastiansIT select-image element

This web component is part of my personal collection SITWebComponents.

It allows you to select a image file from your local storage. The selected image is shown and can be craped as a data URL via Javascript.

Examples

You can see some examples as part of the demo page.

Documentation

1. <sit-select-image>
2. SelectImageElement
3. ShadowDOM

Prerequisite

To use this element the user agent must have support for…

• ECMAScript 2022 Private Identifier
• ECMAScript 2015 const Keyword
• ECMAScript 2015 Class Syntax
• ECMAScript 2015 Modules
• HTML Custom Elements
• Shadow DOM
• HTML5 Template Element
• ECMAScript 2015 Template Literals

The most features listet here can transpiled to older javascript features or can be simulated with polyfills. But this is a Job for you.

To style the shadow DOM support for addidional features is needed:

• CSS Shadow Parts

For more information about styling see my documentation.