angularjsionic-frameworksignaturepad

Store as Png Image from Signature pad?


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..!


Solution

  • 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