CODEWITHSUNDEEP
angularfirebasefirebase-realtime-databasefirebase-storage
zetajames
zetajames

Reputation: 9

How to save Canvas drawing to Firebase using Angular?

I'm building an angular app with Canvas drawing pad. I used Angular SingnaturePad2 to get this working. https://github.com/lathonez/angular2-signaturepad-demo

How can I save canvas drawing to firebase realtime database or firebase storage? Which would be the best practice?

I just want users to log in and draw something and then save so they can see what they drew when log back in. However all drawings should be private. Users shouldn't be allowed to see each other's drawing.

When I click on submit, I get this kind of image string in console: 

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAgAElEQVR4Xu3dB9wtRWH38d/QW+iKogakiL2LImgsqFGjAUvsLajRV1FjNJoQfGNibLEkKvbua0mMInbF3rBHQ2JBQVGsKAhEQdq8n7170Mu9Z3dn9+zumXP2t5/4icmdnfKdeZ7nf/bszgY8FFBAAQUUUGByAmFyI3bACiiggAIKKIABwEWggAIKKKDABAUMABOcdIesgAIKKKCAAcA1oIACCiigwAQFDAATnHSHrIACCiiggAHANaCAAgoooMAEBQwAE5x0h6yAAgoooIABwDWggAIKKKDABAUMABOcdIesgAIKKKCAAcA1oIACCiigwAQFDAATnHSHrIACCiiggAHANaCAAgoooMAEBQwAE5x0h6yAAgoooIABwDWggAIKKKDABAUMABOcdIesgAIKKKCAAcA1oIACCiigwAQFDAATnHSHrIACCiiggAHANaCAAgoooMAEBQwAE5x0h6yAAgoooI

and I'm trying to save & retrieve this state using firebase.

Upvotes: 0

Views: 1037

Answers (2)

Rakesh Pandey
Rakesh Pandey

Reputation: 37

After getting image string as you mentioned above just split image/png;base64 part from the string 

       const file = fileData.split(',')[1];
        const metadata = {
            contentType: 'image/png',
        };
        const n = Date.now();

        // const userProfileRef = this.storage.ref(`gs://dentistry-project-dev.appspot.com/signature/${n}.png`);

    const userProfileRef = this.storage.ref(`/signature/${n}.png`);
        userProfileRef.putString(file, 'base64', metadata).then(snapshot => {
            console.log('snapShot',snapshot);
        }).catch(error => {
            console.log(error);
        });

Upvotes: 0

Bryan Massoth
Bryan Massoth

Reputation: 1159

You can upload to Firebase Storage from a Data URL just use putString with the option DATA_URL docs.

Ex.

// `location` is the Firebase Storage reference;
// `type` is the image type (in your case 'image/png')
function uploadToStorage (location, canvas, type) {
  var dataURL = canvas.toDataURL(type);

  return location.putString(dataURL, 'data_url')
}

Upvotes: 1

Related Questions