CODEWITHSUNDEEP
angularjssqliteionic-framework
sajith ik
sajith ik

Reputation: 11

How to take picture using cordova camera and save into sqlite

I need to take a photo and save into SQLite DB Not into Gallery. I got camera and captured an image but i need to save it to my SQLite. please help me to insert it into SQLite.

$scope.takePicture = function() {  var options = {  quality : 75,  destinationType : Camera.DestinationType.DATA_URL,  sourceType : Camera.PictureSourceType.CAMERA,  allowEdit : false, encodingType: Camera.EncodingType.JPEG, targetWidth: 300, targetHeight: 300, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.imgURI = "data:image/jpeg;base64," + imageData;
    }, function(err) {
        // An error occured. Show a message to the user

    }); }

Upvotes: 0

Views: 4728

Answers (1)

cfprabhu
cfprabhu

Reputation: 5352

First you will convert the base64 image to blob. And then save it to sqlite

function dataURItoBlob(dataURI, callback) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);
 
    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
 
    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
 
    // write the ArrayBuffer to a blob, and you're done
    var bb = new BlobBuilder();
    bb.append(ab);
    return bb.getBlob(mimeString);
}

Add this plugin to your app cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git

Download the ngcordova.js https://github.com/driftyco/ng-cordova/archive/master.zip

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">

We need to inject it into our angular.module, found in app.js, like the following:

angular.module('starter', ['ionic', 'ngCordova'])

It’s time to start using this library. For simplicity, we are going to do the following:

1) Create a new table called people
2) Insert two people into this new table
3) Select all the people found in our table with my last name
Before we start coding, it is very important to note that database activity can only be done when the onDeviceReady() method has fired. With this in mind, I’m going to open the database in the modules .run() method like so:

var db = null;
 
var example = angular.module('starter', ['ionic', 'ngCordova'])
    .run(function($ionicPlatform, $cordovaSQLite) {
        $ionicPlatform.ready(function() {
            if(window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if(window.StatusBar) {
                StatusBar.styleDefault();
            }
            db = $cordovaSQLite.openDB("my.db");
            $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text, img blob)");
        });
    });

$scope.takePicture = function() {  var options = {  quality : 75,  destinationType : Camera.DestinationType.DATA_URL,  sourceType : Camera.PictureSourceType.CAMERA,  allowEdit : false, encodingType: Camera.EncodingType.JPEG, targetWidth: 300, targetHeight: 300, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.imgURI = "data:image/jpeg;base64," + imageData;
        blobImg = dataURItoBlob($scope.imgURI);
        //here you will call insert function
    }, function(err) {
        // An error occured. Show a message to the user

    }); }

$scope.insert = function(firstname, lastname, img) {
    var query = "INSERT INTO people (firstname, lastname, img) VALUES (?,?,?)";
    $cordovaSQLite.execute(db, query, [firstname, lastname, img]).then(function(res) {
        console.log("INSERT ID -> " + res.insertId);
    }, function (err) {
        console.error(err);
    });
}

Upvotes: 3

Related Questions