Store as Png Image from Signature pad?

Question

I have implement Signature-Pad and its working. so, now I want to store the Signature as .png image to local/cloudinary.

$scope.saveCanvas = function() {
  var sigImg = signaturePad.toDataURL('image/png');
  $scope.signature = sigImg;
  console.log("$scope.signature :",$scope.signature);
}

above code gives base64 string like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAY

How can I convert the base64 into .png image?

I have tried :angular-base64

 $scope.decoded = $base64.decode(sigImg);

I don't know how to use this..

thanx..!

Answer 1

You can do it using the following code:

const dataURL = this.signaturePad.toDataURL('image/png');
const data = atob(dataURL.substring('data:image/png;base64,'.length)),
  asArray = new Uint8Array(data.length);

for (var i = 0, len = data.length; i < len; ++i) {
  asArray[i] = data.charCodeAt(i);
}

const blob = new Blob([asArray], { type: 'image/png' });

Then you should be able to upload the blob to cloudinary.

I took this code from the following stackoverflow answer