Skip to content

pelusanchez/rext

Repository files navigation

Rext Image Editor

npm version

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