A simple way to add paint into a Vue app

Painterro javascript widget is a lightweight library for screenshots processing inside of the browser. Learn how to add paint into a Vue app using Painterro.
🙏 Scream for help to Ukraine
Today, 17th May 2022, Russia continues bombing and firing Ukraine.
Don't trust Russia, they are bombing peaceful cities with civilians and children and brazenly lying at the same time that they are not doing this 😡
You can significantly help even without money, here is how: #StandWithUkraine
Don't not remain indifferent, you never know when war will come to your home.
You can significantly help even without money, here is how: #StandWithUkraine
Don't not remain indifferent, you never know when war will come to your home.
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: