【问题标题】:Storing captured image into SQlite Database? (Cordova)将捕获的图像存储到 SQlite 数据库中? (科尔多瓦)
【发布时间】:2016-07-28 03:51:31
【问题描述】:

到目前为止,我已经为我的应用程序工作了相机 api,当单击按钮时相机会打开,一旦拍摄图像,它就会显示在页面上。

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

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

相机功能:

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>

更新脚本:

 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);
  }

【问题讨论】:

  • 您将图像转换为base64并存储它。
  • @IamKarim1992 如果您能提供某种模板会很棒?
  • @Mahdi :您的查询有解决方案吗?因为我也面临类似情况的问题。

标签: javascript html sqlite cordova


【解决方案1】:
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);
        }

【讨论】:

  • 感谢您,但我仍然不完全了解如何将数据插入数据库。我已经更新了我的代码以全面显示它的外观,我创建了另一个查询,该查询创建了一个名为 gallery 的新表,如上所示。我可以在“myImage”列中插入一个执行sql吗?
  • 你进行查询并传递给它 .tx.executeSql(sql); where var sql = "INSERT INTO Gallery (id, myImage) VALUES("SomeID",'" + (base64imageData) + "')"....其中你将 base64imageData 声明为全局变量,数据库写入函数可以访问,你可以在任何你喜欢的地方调用它。这是我实施时的逻辑和非常有效的答案。如果它有助于将其标记为答案。
  • 不,你不能因为 img.src 是成功函数的本地,但 base64imageData 将是全局的,你可以在运行 tx.executeSql 的任何地方访问数据
  • 我再次更新了我的代码。我收到查询警报,其中显示 base64imageData 未定义。我在它周围放了括号,没有,两次我都不确定。
猜你喜欢
  • 2015-11-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-10
  • 2023-03-13
  • 1970-01-01
  • 2013-01-26
  • 2015-10-12
  • 1970-01-01
相关资源
最近更新 更多