Making a Signature Drawpad with Ionic

Question

I was making a signature drawpad with Ionic (turorial of devdactic), but at saveCanvas() it gets back error in consolelog

Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAC0CAYAAAAuPxHvAAAO30lEQ…ADAghWA8iYgAAEyhBAsMpwpBQIQKABAQSrAWRMQAACZQj8Bx23u8RuATaDAAAAAElFTkSuQmCC' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Controller:

.controller('SignatureCtrl', function($scope) {
    var canvas = document.getElementById('signatureCanvas');
    var signaturePad = new SignaturePad(canvas);

    $scope.clearCanvas = function() {
        signaturePad.clear();
    }

    $scope.saveCanvas = function() {
        var sigImg = signaturePad.toDataURL();
        console.log(sigImg)
        $scope.signature = sigImg;
    }
})

HTML:

<ion-pane>
<ion-header-bar class='bar-calm'>
    <h1 class='title'>Potpis</h1>
  </ion-header-bar>

  <ion-content class='has-header padding' scroll='false'>
      <canvas id='signatureCanvas' width='300' height='180' style='border: 1px solid black;'></canvas>
      <div class='button-bar'>
          <a class='button button-energized' ng-click='clearCanvas()'>Clear</a>
          <a class='button button-balanced' ng-click='saveCanvas()'>Save</a>
      </div>
      <br>
      <img ng-src='{{signature}}'/>
  </ion-contnt>

ddepablo ddepablo · Accepted Answer · 2016-03-16T07:43:37

Try adding <meta http-equiv="Content-Security-Policy" content="default-src *; img-src * data:">

More information here

Making a Signature Drawpad with Ionic

2 Answers