@plurid/enhanced-image-html

Enhanced Image HTML Element, HTML Custom Elements implementation

Usage no npm install needed!

<script type="module">
  import pluridEnhancedImageHtml from 'https://cdn.skypack.dev/@plurid/enhanced-image-html';
</script>

README


Version Build Status License: MIT

Enhanced Image for HTML Custom Elements

HTML Image Element with Enhanced Abilities

Usage

Install from NPM

npm install enhanced-image-html

then use in your HTML instead of the regular <img> tag

<enhanced-image src="/path/to/image.ext"><enhanced-image>

The image can be enhanced in HTML

<enhanced-image
    invert="1" // 0 or 1
    contrast="152" // values between 0 and 200
    hue="-47" // values between -180 and 180
    saturation="76" // values between 0 and 200
    lightness="123" // values between 0 and 200
    src="/path/to/image.ext">
<enhanced-image>

or programmatically in JS

let enhancedImage = document.querySelector('#enhanced-image-id');
enhancedImage.invert = "1"; // 0 or 1
enhancedImage.contrast = "152" // values between 0 and 200
enhancedImage.hue = "-47" // values between -180 and 180
enhancedImage.saturation = "76" // values between 0 and 200
enhancedImage.lightness = "123" // values between 0 and 200

Demo

Each image will have on hover an Enhanced Image settings button in the corner.

alt text

Clicking/tapping the button will reveal the controls.

alt text

Moving the sliders alters the image accordingly.

alt text