Package Exports

rext-image-editor
rext-image-editor/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rext-image-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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