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 directly in a browser!
If you want to try Painterro by yourself on a serious real-life project - try https://tracklify.com (the tool is free). The idea of Tracklify is a "next-level" task management board that makes users able to spend less time and clicks than on other task boards. To check how Painterro looks and works just go to the Tracklify project board and paste some image data from the clipboard (e.g. screenshot) using Ctrl+V (or CMD+V if you are on Mac). So as you can see it helps to create tasks from screenshots in a very handy way. Using a library made Tracklify an ultimately efficient tool for software frontend developers and even UI/UX designers who constantly need to make screenshots and highlight some areas in their tasks, draw arrows etc. With this lib, they can just press PrntScr to get a screenshot into the clipboard and then just paste the clipboard content into a web page in the browser, and the library automatically opens so the user can draw on a screenshot or crop it in a couple of movements, and after confirming it automatically creates a task from your edits.
Interesting? Here I will review the features of the Painterro.
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:
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:
Pixelizing
๐ถ If you accidantly got a sensitive information on image or screenshot which you want to hide just select it:
And press P:
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:
You can disable shadows:
You can select line and fill color for a tool, also it supports alpha channel:
Line width is also adjustable, e.g. here I drawn semi-transparent pink rectangle with 10px borders:
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:
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:
Formatting support? Yes!
Select a text inside and press CTRL+I, CTRL+B, CTRL+U:
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:
And just copy-paste it to activaed text tool:
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:
If you need just resize image and feel with empty color, use Resize:
Mobile?
๐ฑSure - we use simple toollbar swipe so you can work on smaller devices:
Technical requirements of Painterro js paint
- Could be connected with js
<script>tag or bynpm installfor SPA - No dependencies
- Simple configuration
Useful links
- Live demo on Tracklify - simple sign up needed
ยฏ\_(ใ)_/ยฏ - The project source is hosted on GitHub
- Project npm package
- Dedicated wordpress Paintrro plugin
