Question

我正在尝试设置数据库来存储用户图像和名称。我已将代码放在jsfiddle http://jsfiddle.net/Inkers/dZJnG/上。当我在我的设备上运行代码时，我遇到了一些错误。代码也在这里：

HTML

<body onload="onDeviceReady()">
<h3>Enter name and picture</h3>
<div id= "userProfile">
  <button onclick="takePhoto();">Capture Photo</button> <br>    
  <img style="display:none;width:100px;height:100px;" id="smallImage" src="" />
  <p></p>
  <input id="userName" type="text" placeholder="name"> 
  <input id="saveProfile" type="button" value="Save" onClick="insertEntry();""location.href='Createtask.html'"> <br>
  <input id="allUsers" type="button" value="All users" onClick="queryDB();"> <br>
</div>

JS

  function init(){
  document.addEventListener("deviceready", onDeviceReady, false);
  }

var pictureSource;   // picture source
var destinationType;

function onDeviceReady() {
    var db = window.openDatabase("database", "1.0", "Profiles", 5000);
    if(db) {
      console.log('The database is working');
      alert('The database is working');
      db.transaction(createTable, insertEntry, errorCB, successCB); // only do stuff if db exists
  pictureSource=navigator.camera.PictureSourceType;
      destinationType=navigator.camera.DestinationType;
}
  else{
      console.log('There is a problem');
}
}

function takePhoto(){
  // Take picture using device camera and retrieve image as base64-encoded string
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
} 

  function onPhotoDataSuccess(imageData) {
  console.log(imageData);
  // Get image handle
  var smallImage = document.getElementById('smallImage');
  // Unhide image elements
  smallImage.style.display = 'block';
  // Show the captured photo
  // The inline CSS rules are used to resize the image
  smallImage.src = "data:image/jpeg;base64," + imageData;
}

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

function createTable(tx) {
    var sqlStr =('CREATE TABLE IF NONE EXISTS USERS(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, image BLOB)');
    tx.executeSql(sqlStr,[],successCB, errorCB);
    console.log("Users table created");
}

function insertEntry(tx){
    var tmpName = document.getElementById("userName").value;
    var tmpImage = document.getElementById("smallImage").src;
    var sqlStr=('INSERT INTO USERS (name, image) VALUES (?,?)');
    tx.executeSql = (sqlStr, [tmpName, tmpImage], onSqlSuccess, errorCB);
    alert('record entered');
}
// Query the success callback
function onSqlSuccess(tx, res){
    var len = results.rows.length;
    console.log("USERS table: " + len + " rows found.");
    for (var i=0; i<len; i++){
        console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
    }
} 

// Query the database
//
function queryDB() {
    var sqlStr = ('SELECT * FROM USERS; ORDER BY id ASC');
    database.transaction(function (tx){
    tx.executeSql(sqlStr,[],onSqlSuccess, errorCB);
    })
}

// Transaction error callback
//
function errorCB(err) {
    console.log("Error processing SQL: "+err.code);
}

// Transaction success callback
//
function successCB() {
    console.log('');
}

将图像保存到数据库中

0 个答案: