Selecting file from camera display on signature pad

Ionic Framework ionic-v3
1

I am selcting one file from camera and getting path like file://something_path.jpg then I am intialising the same path to signature pad like


this.storage.set('savedSignature', targetPath);
   this.storage.get('savedSignature').then((data) => {   
     this.presentToast(data);    
      this.signaturePad.fromDataURL(data);
    });

but its not working

2

Could you define ‘not working’? What doesn’t work? Aren’t you getting a value at all, are you getting an error etc.

3

Hi yes I am getting the value path of the file after capturing image from camera In my function but I want to display that path on signature pad that is not happening I have written like signaturePad.fromUrl(filepath)
Image is not displaying there but if I give any image link it will display

The path that I am getting after capturing from camera is like below…

File:///data/data/io.ionic.starter/filename.jpg

4

Hi yes I am getting the value path of the file after capturing image from camera In my function but I want to display that path on signature pad that is not happening I have written like signaturePad.fromUrl(filepath)
Image is not displaying there but if I give any image link it will display

The path that I am getting after capturing from feom camera is like below…

File:///data/data/io.ionic.starter/filename.jpg

5

To get back at this, you’re setting this.signaturePad.fromDataURL(data) right now. But data is a string containg a file path. When check the repo over here https://github.com/szimek/signature_pad I noticed that fromDataURL (which the name suggests) expect a data url, not a file url. So you should make sure you’re actually feeding a dataURL to the signaturepad, not a path to a file.

6

this is out of this topic and have created another topic for this please reply if u want to here or there for uploading multiple files signature pad is working actually plz have a look on this code
here please check below code

public takePicture(sourceType, DestinationType) {
    var options = {
      quality: 100,
      sourceType: sourceType,
      destinationType: DestinationType,
      saveToPhotoAlbum: true,
      correctOrientation: true,
      mediaType: 2
      // allowEdit : true
    };


    this.camera.getPicture(options).then((imagePath) => {
      if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
        this.filePath.resolveNativePath(imagePath)
          .then(filePath => {            
            this.lastImage = this.createFileName();           
            this.tempPath = "data:image/jpeg;base64," + imagePath;
            this.selectedImagePath = imagePath;
            this.signaturePad.fromDataURL(this.tempPath);
          });

      } else {
       
        this.lastImage = this.createFileName();

        this.tempPath = "data:image/jpeg;base64," + imagePath;
        this.selectedImagePath = imagePath;
        this.signaturePad.fromDataURL(this.tempPath);
      }
    }, (err) => {
      this.presentToast(err);
    });
  }

  private createFileName() {
    var d = new Date(),
      n = d.getTime(),
      newFileName = n + ".jpg";
    return newFileName;
  }

The above code will give me the images and and the path in “imagePath” that I am storing in an array and the “tempPath” is for displaying on signature that is working fine now but for uploading the multiple files like in below code how to send that I am not getting
Please check below code;;

public uploadImage() {
   
    let body: string = JSON.stringify({'postData': this.postData}); //here post data is like this this.postData.push({key:this.selectedImagePath},{key:this.selectedImagePath});
    // type: 'application/json',        
    let headers: any = new Headers({ 'Content-Type': 'application/json' }),
      options: any = new RequestOptions({ headers: headers }),
      url: any = this.uploadUrl;

    this.http.post(url, body, options)
      .subscribe((data) => {
        let message = data["_body"];
        message = JSON.parse(message);
        if (message.success == true) {
          window.localStorage.setItem("id", message.user_id);
          window.location.reload();
        }

        else {
          let alert = this.alertCtrl.create({
            title: 'Error',
            subTitle: message.message,
            buttons: ['OK']
          });
          alert.present();
        }
      });
  }
7

@Nikhil_dhar123 can you share your signature-pad.html file code please ?? am facing same problem now that "how to set/display image taking with camera on signature-pad "… please help me…my email id umeshshelke2014@gmail.com

8

@Nikhil_dhar123
hello ,how you display your camera image on signature-pad