将捕获的图像存储到SQlite数据库? (Cordova)

问题描述:

到目前为止,我有相机api为我的应用程序工作,当一个按钮被点击时相机被打开,一旦图像被拍摄,它显示在页面上。

So far I have got the camera api working for my app, to which the camera is opened when a button is clicked and once the image is taken it is displayed on the page.

我的下一步是将图像存储到我的sqlite数据库中的表中。创建数据库没有问题,因为我已经有一些其他表用于应用程序的其他部分工作正常,它只是找出如何将图像存储到数据库。

My next step is to store the image into my sqlite database within a table. Creating the database is no problem as I already have a couple of other tables used for other parts of the app which work fine, it's just finding out how to store the image into the database.

有人可以在这里提供一些协助吗?

Can someone provide some assistance here?

相机功能:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  document.getElementById("btnCamera").onclick = function() {
     navigator.camera.getPicture(function (imageUri) {
     var lastPhotoContainer = document.getElementById("lastPhoto");
     alert("Hot stuff!");
     lastPhotoContainer.innerHTML = "<img src='" + imageUri + "' style='width: 75%;' />";
     }, null, null);
          };
          }

HTML:

<div data-role="page" id="page7" data-theme="d">
    <div data-role="header">
        <a href="#page1" class="ui-btn ui-icon-home ui-btn-icon-left">Sign ut</a>
        <h1>SoccerMeet</h1>
    </div>
    <div data-role="main" class="ui-content">
        <input id="btnCamera" type="button" value="Camera photo" />
        <p id="lastPhoto"></p>
    </div>

    <div data-role="footer">
        <h2>&copy; Gallery</h2>
    </div>
</div>

UPDATED脚本:

UPDATED Script:

 document.addEventListener("deviceready", onDeviceReady, false);
  var db;

  function onDeviceReady() {
    db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024);
    db.transaction(function(tx) {
      tx.executeSql('CREATE TABLE IF NOT EXISTS Gallery (id INTEGER PRIMARY KEY, myImage BLOB)');
    }, errorE, successS);
  }

  function successS() {
    alert("Camera database ready!");
    document.getElementById("btnCamera").onclick = function() {
      navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
      });
    };
  }

  function onSuccess(tx, imageData) {
    alert("Camera test 1");
    var image = document.getElementById("lastPhoto");
    image.src = "data:image/jpeg;base64," + imageData;
    base64imageData = imageData;
    var _Query3 = ("INSERT INTO Gallery(myImage) values ('" + base64imageData + "')");
    alert(_Query3);
    tx.executeSql(_Query3);
  }
  /*   function successCamera() {
     navigator.notification.alert("Image has been stored", null, "Information", "ok");
       $( ":mobile-pagecontainer" ).pagecontainer( "change", "#page4" );
   } */

  function onFail(message) {
    alert('Failed because: ' + message);
  }

  function errorE(err) {
    alert("Error processing SQL: " + err.code);
  }


document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  document.getElementById("btnCamera").onclick = function() {
     navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
 });
 };
          }
          function onSuccess(imageData){
           var image = document.getElementById("lastPhoto");
           image.src = "data:image/jpeg;base64," + imageData;
           //the imageData is a base64 representation of the image.
           base64imageData=imageData;// this variable is a global variable and when ever asked for u can send it to SQL Operation class for storing.
          }

          function onFail(message) {
            alert('Failed because: ' + message);
        }