Rext is a web based image editor. Uses webGL for image processing. Only client side. Sample: https://rext.es
- Exposition.
- Brightness.
- Contrast.
- Glades.
- Lights.
- Shadows.
- Darks.
- Radiance: local contrast and detail level.
- HDR.
- Temperature.
- Tint.
- Saturation.
- Vibrance.
- Black and white.
- Light and shadow color.
- Level: level of details.
- Radio: radius of detail.
- Mask: quantity of detail.
- Dehaze.
- Atmospheric light: Used for dehaze.
- 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].
<!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>
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)
| 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 |