Javascript initialization and functions implementation into a Vue component

Question

I am trying to copy @szimek's signature pad...

I always get confused on how to implement a pure JavaScript functions and initialization(such as shown in the code below) into a Vue component.

I am new to Web Development, I know my question is silly but I hope you bear with me :)

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');

saveButton.addEventListener('click', function(event) {
  var data = signaturePad.toDataURL('image/png');

  // Send data to server instead...
  window.open(data);
});

cancelButton.addEventListener('click', function(event) {
  signaturePad.clear();
});

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
img {
  position: absolute;
  left: 0;
  top: 0;
}

.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width:400px;
  height:200px;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>
<h1>
  Draw over image
</h1>
<div class="wrapper">
  <img src="https://preview.ibb.co/jnW4Qz/Grumpy_Cat_920x584.jpg" width=400 height=200 />
  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
  <button id="save">Save</button>
  <button id="clear">Clear</button>
</div>

Estus Flask · Accepted Answer · 2020-05-15 06:50:26Z

1

Don't use <script>, it's useless in Vue component template, instead use it like a package, import SignaturePad from 'signature_pad'.

Initialization code goes to created or mounted hook.

DOM shouldn't be accessed directly if possible in Vue. If this needs to be done, refs need to be used instead. Event handlers can be set in the template:

<div class="wrapper">
  <canvas ref="padRef" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
  <button @click="save">Save</button>
  <button @click="clear">Clear</button>
</div>

Contrary to legacy JS, components are supposed to be destroyed at some point. A proper cleaup needs to be done. It can be something like:

mounted() {
  this.signaturePad = new SignaturePad(this.$refs.refPad, ...);
}
destroyed() {
  // some cleanup
  this.signaturePad.off();
},
methods: {
  save() {
    var data = this.signaturePad.toDataURL('image/png');
    ...
  },
  clear() {
    this.signaturePad.clear();
  }
}

answered May 15, 2020 at 6:50

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aznmik Over a year ago

Thanks man, I did the same earlier but I dunno why it wont work :P, Thanks tho. Btw, Is it possible to add image to a canvas? I'm trying to have a soft copy of a document and draw a signature over it.

Estus Flask Over a year ago

You're welcome. I don't use this package myself. signaturePad.fromDataURL likely does what you ask about.

Collectives™ on Stack Overflow

Javascript initialization and functions implementation into a Vue component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related