how to fetch and display image from sqlite databae using angular js

Question

I stored images in sqlite database by converting it in base64 format and inserted into DB.It was inserted succssfuly as i got insert id after inserting records but when i opened my db the database's table wasnt having any column .Is that correct ??.
And my second problem is i want to fetch image and display it in the particular area ie pictureUrl (here) but unable to do so. Below is my code. Suggest the changes required. Thanks in advance :)
app.js

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);
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  db = window.openDatabase("my.db","1.0","my.db",100000);
  $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS imagewala (img blob)");
  window.alert("Database Created .. !")
});

  example.controller('CameraCtrl',function($scope, $cordovaCamera,$cordovaSQLite){
    function dataURItoBlob(dataURI, callback) {
      var byteString = atob(dataURI.split(',')[1]);
     var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      var bb = new BlobBuilder();
      bb.append(ab);
      return bb.getBlob(mimeString);
    }
  $scope.pictureUrl="http://placehold.it/50x50";
    $scope.takePicture=function(img){
    var options = {
      destinationType: Camera.DestinationType.DATA_URL,
      encodingType: Camera.EncodingType.JPEG
      };
    $cordovaCamera.getPicture(options).then(function(imageData) {
     $scope.pictureUrl = "data:image/jpeg;base64," + imageData;
      var query = "INSERT INTO imagewala (img) VALUES (?)";
      $cordovaSQLite.execute(db, query, [img]).then(function(res) {
        window.alert("INSERT ID -> " + res.insertId);
      }, function (err) {
        window.alert(err);
      });
      window.alert("Picture Captured .. !!");
    }, function(err) {
      window.alert("Error hai baaaa..!!"+err);
    });
 }
    $scope.takePhoto=function(){
      var options = {
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
        encodingType: Camera.EncodingType.JPEG
      };
      $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.pictureUrl = "data:image/jpeg;base64," + imageData;
        window.alert("Picture Captured .. !!");
      }, function(err) {
        window.alert("Error hai baaaa..!!"+err.message);
      });
    }
    $scopr.selectPhoto= function () {
      var query = "select img from imagewala";
      $cordovaSQLite.execute(db, query, []).then(function(res) {
        window.alert("SELECT ID -> " + res.insertId);
        $scope.pictureUrl=res.readAsArrayBuffer();
        window.alert("ahahaha");
      }, function (err) {
        window.alert(err);
      });
      window.alert("Photo Captured .. !!");
    }

  });

Index.html

<!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>
    <script>
      window.location='./main.html';
    </script>
    </head>
  <body>
  </body>
</html>

Main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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="lib/ionic/js/ng-cordova.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" ng-controller="CameraCtrl">
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Camera</h1>
  </ion-header-bar>
  <ion-content >
    <div class="list card">
      <div class="item item-image">
        <img src="{{pictureUrl}}">
      </div>
    </div>
    <div class="padding">
      <button ng-click="takePicture(pictureUrl)" class="button button-block button-calm">Take Picture</button>
      <button ng-click="takePhoto()" class="button button-block button-positive">Choose Picture</button>
      <button ng-click="selectPhoto()" class="button button-block button-assertive">Choose Picture</button>

    </div>
  </ion-content>
</ion-pane>
</body>
</html>

Answer 1

As per my knowledge cordova sqlite plugin doesn't support blob data type, Try to change data type img to TEXT data type and check.

I hope this solves your problem

how to fetch and display image from sqlite databae using angular js

Question

1 answers

solution1
0 2016-03-31 10:55:52

how to fetch and display image from sqlite databae using angular js

Question

1 answers

solution1 0 2016-03-31 10:55:52

solution1
0 2016-03-31 10:55:52