rext-image-editor
v1.4.1
Published
REXT is a client side image editor that uses GPU.
Downloads
4
Maintainers
davidigleReadme
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 |