A simple way to add paint into a Vue app

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 imagedraw an arrowpixelate some sensitive information on imageeach of these can be done with ahotkeys

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:

Painterro on npm