Painterro javascript widget is a lightweight library for screenshots processing inside of the browser. Painterro allows:

  • quickly crop image or screenshot
  • highlight a zone
  • draw text over an image
  • draw an arrow
  • pixelate some sensitive information on image
  • each of these can be done with a hotkeys

First, install the package:

npm install painterro --save

Create container in some component:

<div id="painterro"></div>

Add some styles if needed, for example a simple stretch to all window:

<style>
  #painterro {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  }
</style>

Then in JS code we have to import and initialize a library:

import Painterro from 'painterro';
import Vue from 'vue';

..
export default {
    data() {
      return {
        painterro: null,
        ...
      }
    }
    mounted() {
      Vue.nextTick( () => {
        this.painterro= Painterro({
          id: 'painterro',
          colorScheme: {
            main: '#f8f8f8',
            control: '#d5d5d5',
            controlContent: '#434649'
          },
          saveHandler: (image, done) => {
            const type = 'image/png';
            const file = new File([image.asBlob(type)], "file.png",  {
              type: type,
            });
            this.add_file(file); // do something with file e.g. upload to server
            done(true); //done and hide painterro
          }
        });
      });
      ...
    }

To show painterro (e.g by clicking on some button) we do:

<button @click='painterro.show()'>Open painterro</button>

Voila. Keep it simple, stay painted and use good libraries.

Useful links: