如何使用 angularjs 从 sqlite 数据库中获取和显示图像答案

【问题标题】：how to fetch and display image from sqlite databae using angular js如何使用 angularjs 从 sqlite 数据库中获取和显示图像
【发布时间】：2016-01-11 12:57:15
【问题描述】：

我通过将图像转换为 base64 格式并将其插入 DB 将图像存储在 sqlite 数据库中。它被成功插入，因为我在插入记录后获得了插入 ID，但是当我打开我的数据库时，数据库的表没有任何列。正确吗？ ?.
我的第二个问题是我想获取图像并将其显示在特定区域，即图片Url（此处）但无法这样做。下面是我的代码。建议所需的更改。在此先感谢:)
应用程序.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 .. !!");
    }

  });

索引.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>

【问题讨论】：

标签： javascript android angularjs sqlite ionic

【解决方案1】：

据我所知，cordova sqlite 插件不支持 blob 数据类型，请尝试将数据类型 img 更改为 TEXT 数据类型并检查。

希望能解决你的问题

【讨论】：