Using painterro with Vue.js

Hinty uses Painterro javascript widget for screenshots processing: https://github.com/ivictbor/painterro. Hint shows how to integrate it in Vue.js 2.

First, install the component:

npm install painterro --save

Create container div in our component:

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

It will be fixed with a shadow box:

<style>
  #painterro {
    position: fixed;
    top: 65px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    box-shadow: 0 0 20px 5px #505050;
  }
</style>

Then in JS code we import the library and perform initialization:

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);
            done(true); //done and hide painterro
          }
        });
      });
      ...
    }

To show Painterro (for example by clicking on some button) we do:

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