JS paint plugin for your website 🎨

The Painterro is a simple but powerful embeddable open-source JS paint for any website or webapp.

It allows very fast processing of raster images. Here we will review the features.

Cropping

🖼 By default selection tool is active, so you can start selecting interesting area just after you opened file in Painterro (which could be triggered by document.onpaste for example).

After selecting the area which you want to leave on image, just press crop once:

js paint crop feature

Or even simpler - just press [C] on keyboard.

By the way, to learn what shortcout is used - just hover on tool and check the hint:

shortcout view for Painterro jspaint

Pixelizing

🕶 If you accidantly got a sensitive information on image or screenshot which you want to hide just select it:

Pixelize (hide) area in Painterro js paint

And press P:

Pixelized example in painterro jspaint

Line, Rectangle, Circle primitives in js paint

⬛ One of the most common scenario for js paint librarry - is to highlight an objects on the image. You can do it with underlinining, or wrapping in rectangle/circle:

JS Paint primitives

You can disable shadows:

Enable shadow in Painterro js paint

You can select line and fill color for a tool, also it supports alpha channel:

Painterro JS paint color

Line width is also adjustable, e.g. here I drawn semi-transparent pink rectangle with 10px borders:

Transparency in Painterro

Arrows

↗ Arrows a great tool to define something on image. Since this post created on HINTY platform, here we also have a painterro inside of our editor.

Here you can control line width and arrow length:

Painterro js paint arrows

Text tool

🔠 Adding a text - is required feature for any JS paint. Just press T, click on the place where you want to add a test and start typing:

Text stroke in Painterro JS Paint

Formatting support? Yes!

Select a text inside and press CTRL+I, CTRL+B, CTRL+U:

Text formain in Painterro js paint

As an author of Painterro, I did not want to limit you in formatting, so you can even copy a HTML-formatted text for example, create it in Google Docs:

Google docs to prepare text for paste in paint

And just copy-paste it to activaed text tool:

Pasted formatted text in Painterro

Rotating, resizing and scaling

For simplisity purpose we have only 90 degree rotation. Rich us on github issues if you need different angles😉

To increase or decrease image resolution you can use Scale feature:

Resize in Painterro paint

If you need just resize image and feel with empty color, use Resize:

Resized image example in Painterro js paint

Mobile?

📱Sure - we use simple toollbar swipe so you can work on smaller devices:

Painterro paint on mobile

Technicall requirements of Painterro js paint

Usefull links

Just a preview

#painterro
menu 16
Ivan Borshchov profile picture
Oct 24, 2020
by Ivan Borshchov
Did it help you?
Yes !
No

Best related

Other by Ivan Borshchov