GitHub | npm | DEMO
Support by DevForth - Best quality, rapid, modern tech development services

[![npm][npm]][npm-url]

Painterro is JavaScript paint widget which allows editing images directly in a browser.
It can be easily integrated into your website or blog by including only one js file and calling initialization code.

With Painterro you can:
- Paste image from clipboard with Ctrl+V (e.g. PtnScr screenshot), drag and drop it into widget, or load with open dialog
- Crop image by defined area
- Paint primitives (alpha color can be used)
- Add text
- Rotate / resize (scale) image
- Pixelize some area to hide sensitive data

Originally Painterro was designed for quick screenshots processing: You make screenshot by pressing PrtSc button,
then open Painterro on your website, paste an image with Ctrl+V,
crop it to interested area, highlight something with line/rectangle tool and/or add some text
to the image and save on server with custom save handler (e.g. simple XHR request to your backend).
In addition, you can use it for processing any kind of raster images. Please try a demo.
Also painterro has Wordpress Plugin.

If you want to see some feature in Painterro, please leave (or vote for) an issue here.
There is no promise that it will be implemented soon or ever, but it is interesting to know what features users want to have.

Painterro is written with vanilla JS to stay lightweight and minimalistic. Code
written on ES6 which transplited by Babel and packed to a single file using webpack.

Table of contents
=================

* Table of contents
* Installation
* With npm
* By including script
* Read after installation
* Supported hotkeys
* Configuration
* UI color scheme
* Translation
* Saving image
* Base64 saving
* Binary saving
* Saving to WYSIWYG
* Format and quality
* Development
* Building painterro
* Dev-server
* Regenerating icons font
* ToDo list

Installation
============

With npm
--------

If you have npm-based project you can run:
``bash npm install painterro --save`Then in your code

`js import Painterro from 'painterro' ... Painterro().show()`

By including script -------------------

You can download latest painterro-*.min.jshere https://github.com/ivictbor/painterro/releases/ or build it by yourself.

Then insert
`Then in your code:`html`See fiddle example

Read after installation -----------------------

To be able to save edited images on server or client see Saving image. For configurations see Configuration

Supported hotkeys =================

||| |-|-| |Ctrl + Z| Cancel last operation | |Ctrl + V| Paste image from clipboard | |Ctrl + C| Copy selected aria to clipboard (*internal keyboard) | |Shiftwhen drawing rect/ellipse | Draw square/circle | |Shift when drawing line | draw at angles of 0, 45, 90, 135etc degrees | |Altwhen using pipette | Hide zoom helper (colored grid) | |Ctrl + Wheel mouse up/down| Zoom image | |Ctrl + S | Save image |

Configuration =============

You can pass parameters map to Painterro constructor:`js Painterro({ activeColor: '#00ff00', // default brush color is green // ... other params here })`

UI color scheme ---------------

Next group of params used to configure painterro user interface. They should be placed undercolorSchemegroup, for example:`js Painterro({ colorScheme: { main: '#fdf6b8', // make panels light-yellow control: '#FECF67' // change controls color } }).show()`

API -------

.show(openImage) - Shows painterro instance. openImage can have next values:

* false- will open image that already was drawn before last close *some string value, e.g. 'http://placehold.it/120x120&text=image1'- will try to load image from url * all another values - will clear content before open

.hide() - hide instance

.save() - call save (same save as on buttons bar). Can be used if save button is hidden (hiddenTools: ['save'])

Example:

`js var p = Painterro() p.show()`

Translation -----------

Want to translate Painterro into your language? If you need English, Spanish or Catalan language, you should passlanguageparameter, for example:`js Painterro({ language: 'es' }).show()`languagecan have next values: *en- for using English language *es- for using Spanish language *ca - for using Catalan language

If you want to add another language, then fork. Create file in folder langs for your translation and copy [langs/en.lang.js] in it. Then translate all 'Strings'and add reference in [js/translation.js]. After that create pull-request, or just open issue if you don't know how to create a PR. If you want to translate or change strings without contributing you can do this by passingtranslation parameter, for example:

`js Painterro({ translation: { name: 'ua', strings: { apply: 'Застосувати' // other strings } } }).show()`For all strings that can be translated, see [langs/en.lang.js]

Saving image ============

You should provide your save handler, which will post/update image on server or will pass image to another frontend components.

Binary saving -------------

You can post data with binary multipart/form-data request which is the most efficient way to pass data to backend. Example uses raw XMLHttpRequest. Of course, you can usefetch, jQuery, etc insead.

`js var ptro = Painterro({ saveHandler: function (image, done) { var formData = new FormData(); formData.append('image', image.asBlob()); // you can also pass suggested filename // formData.append('image', image.asBlob(), image.suggestedFileName()); var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://127.0.0.1:5000/save-as-binary/', true); xhr.onload = xhr.onerror = function () { done(true); }; xhr.send(formData); } }) ptro.show();`Here is python flask backend example (of course same can be implemented using any technology):`python @app.route("/save-as-binary/", methods=['POST']) def binary_saver(): filename = '{:10d}.png'.format(int(time())) # generate some filename filepath = os.path.join(get_tmp_dir(), filename) request.files['image'].save(filepath) return jsonify({})`

See full example in example directory. You can run it used python3 with installed Flask (pip install flask).

Base64 saving -------------

You can also same image by postingbase64string via plain POST json call. Please note that base64 encoding is less efficient then binary data, for example some1920 x 1080 image took 402398 bytes for base64upload. The same image took301949 bytes with multipart/form-data.

`js var ptro = Painterro({ saveHandler: function (image, done) { // of course, instead of raw XHR you can use fetch, jQuery, etc var xhr = new XMLHttpRequest(); xhr.open("POST", "http://127.0.0.1:5000/save-as-base64/"); xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify({ image: image.asDataURL() })); xhr.onload = function (e) { // after saving is done, call done callback done(true); //done(true) will hide painterro, done(false) will leave opened } }, activeColor: '#00b400' // change active color to green }); ptro.show();`Backend should convertbase64to binary and save file:`python @app.route("/save-as-base64/", methods=['POST']) def base64_saver(): filename = '{:10d}.png'.format(int(time())) # generate some filename filepath = os.path.join(get_tmp_dir(), filename) with open(filepath, "wb") as fh: base64_data = request.json['image'].replace('data:image/png;base64,', '') fh.write(base64.b64decode(base64_data)) return jsonify({})`

Saving to WYSIWYG -----------------

You can just insert image as data url to any WYSIWYG editor, e.g. TinyMCE:`js tinymce.init({ selector:'textarea', }); var ptro = Painterro({ saveHandler: function (image, done) { tinymce.activeEditor.execCommand('mceInsertContent', false, ''); done(true) } })`

Format and quality ------------------

When you call image.asDataURL() or image.asBlob(), you can also specify image mime type (format), e.g.image.asDataURL('image/jpeg'). Default type is 'image/png'. If type isimage/jpeg or image/webp, you can also define image quality from 0.0 to 1.0, default is 0.92, example:image.asDataURL('image/jpeg', 0.5)

Development ===========

After pulling repo install node modules:`bash cd painterro npm install`

Building painterro ------------------

`bash npm run build`

Result file for painterro_tmp - npm explorer

painterro_tmp

v0.2.90

HTML5 image editor widget

paint imageeditor image

0/weekUpdated 3 years agoMITUnpacked: 25.2 MB

Published by Ivan Borshchov

npm install painterro_tmp

Repository Homepage npm