Image Editing / Element Filtering | JavaScript Block Editor

You can add either an ImageView or any other elements such as Button, TextView etc.
We have added a Button to edit.

---

The first one is real and the second one is edited by the filtering property of JavaScript. Let's know about it.

---

Prerequisites

Download JavaScript Block Editor App 

---

HTML

Add either an ImageView or any other element such as Button, TextView etc. Hence we can say that this property is not only for an ImageView.

Make sure you provide a unique id for that element.

Optionally add CSS to that element. For instance you can enlarge the size of that element for a better vision.

JS

Click ImageView > Edit Image.

Provide element id properly.

Edit the element in your own way by enhancing filtering effects:

Blur, Brightness, Contrast, Grayscale, Hue-rotate, Invert, Opacity, Saturate, Sepia.

Understanding subspecs (!important)

Filter effects

Effect	Default Value	Values		Description
		Minimum	Maximum
Blur	0	0	∞	Obscures the element.
Brightness	100	0	∞	Brightens the element.
Contrast	100	0	∞	Contrasts the element.
Grayscale	0	0	100	Makes the element B/W.
Hue-rotate	0	0	360	Adjusts a hue rotation on the element.
Invert	0	0	100	Inverts the element.
Opacity	100	0	100	Adjusts alpha on the element.
Saturate	100	0	∞	Saturates the element.
Sepia	0	0	100	Turns into sepia.

Watch the tutorial video:

Happy implementation!