Rext-image-editor NPM

Rext Image Editor

Rext is a web based image editor. Uses webGL for image processing. Only client side. Sample: https://rext.es

Available effects:

Tone

Exposition.
Brightness.
Contrast.
Glades.
Lights.
Shadows.
Darks.
Radiance: local contrast and detail level.
HDR.

Color

Temperature.
Tint.
Saturation.
Vibrance.
Black and white.
Light and shadow color.

Details

Level: level of details.
Radio: radius of detail.
Mask: quantity of detail.
Dehaze.
Atmospheric light: Used for dehaze.

Transformations

Rotation: Radians.
Rotation origin: Set the origin of the rotation. The image center by default. Range: -1, 1. Center at (0,0)
Scale. Multiplier number.
Translate. Range: -1, 1.

HTML Vanilla example:

<!DOCTYPE html>
<html>
  <head>
    <script languaje="javascript" src="./index.js"></script>
    <style type="text/css">
    #playground {
      display: flex;
      min-height: 400px;
    }

    #rext-params {
      width: 100%;
      min-height: 400px;
      min-width: 300px;
    }
    </style>
    <script languaje="javascript">
      const rext = new RextEditor.RextEditor();
      const defaultParams = {
        hdr: 0,
        exposure: 0,
        temperature: 0,
        tint: 0,
        brightness: 0,
        saturation: 0,
        contrast: 0,
        sharpen: 0,
        masking: 0,
        sharpen_radius: 0,
        radiance: 0,
        highlights: 0,
        shadows: 0,
        whites: 0,
        blacks: 0,
        dehaze: 0,
        bAndW: 0,
        atmosferic_light: 0,
        lightFill: 0,
        lightColor: 0,
        lightSat: 1,
        darkFill: 0,
        darkColor: 0,
        darkSat: 1,
        rotation: 0.0,
        rotation_center: {
          x: 0,
          y: 0,
        },
        scale: {
          x: 1,
          y: 1,
        },
        translate: {
          x: 0,
          y: 0,
        },
        "size": {
          "x": 1,
          "y": 1
        },
        "zoom": 0.15
      };

      function onFileUpload(e) {
        const imageReader = new FileReader();
        const target = e.target;
        if (target.files[0]) {
          rext.load(URL.createObjectURL(target.files[0]))
        }
      }

      function updateParams() {
        const element = document.querySelector("#rext-params");
        
        try {
          // Check if is valid:  
          const newParams = JSON.parse(element.value)
          rext.updateParams(newParams) 
        } catch (err) {
          console.error(err)
          // Ignore error...
        }
        
      }

      window.addEventListener('load', () => {
        rext.setCanvas(document.querySelector("#frame"));
        document.querySelector("#file").addEventListener("change", onFileUpload)
        document.querySelector("#rext-params").value = JSON.stringify(defaultParams, null, 2)
        document.querySelector("#rext-params").addEventListener("change", updateParams);

        rext.load("/test.jpg");
      });
      
    </script>
  </head>
  <body>
    <div>
      <input type="file" id="file"/>
    </div>
    <div id="playground">
      <canvas width="640" height="468" style="width: 640px; height: 468px;" id="frame"></canvas>
      <div>
        <textarea id="rext-params"></textarea>
        <button onClick="updateParams">Apply</button>
      </div>
    </div>
  </body>
</html>

Typescript Example:

npm install --save rext-image-editor

import { RextEditor } from 'rext-image-editor'
import { Params } from 'rext-image-editor/dist/models/models';
import { defaultParams } from 'rext-image-editor/dist/lib/constants';

const rext : RextEditor = new RextEditor()
rext.setCanvas(canvasElm : HTMLCanvasElement)
rext.load(url : string)
rext.updateParams(nextParams : Params)

Params:

Parameter	Type
hdr	number
exposure	number
temperature	number
tint	number
brightness	number
saturation	number
contrast	number
sharpen	number
masking	number
sharpen_radius	number
radiance	number
highlights	number
shadows	number
whites	number
blacks	number
dehaze	number
bAndW	number
atmosferic_light	number
lightFill	number
lightColor	number
lightSat	number
darkFill	number
darkColor	number
darkSat	number
rotation	number (Radians)
rotation_center	2d number { x: number; y: number }
scale	2d number { x: number; y: number }
translate	2d number { x: number; y: number }
size	2d number { x: number; y: number }
zoom	number