Phonegap Database problem - storing images in the database

Question

Hello -

I am trying to make a very basic inventory application with the option to include a photo of items in the inventory. I have everything working except the photo part...

I have looked at this

http://phonegap.pbworks.com/iPhone%3A-Camera-API

and I can get the camera to work, but do not seem to be able to add the image to the database -

Here is a bit of the code

The database definitions/creation - simage is where the photo should go

db.transaction(
        function(transaction) {
            transaction.executeSql(
                'CREATE TABLE IF NOT EXISTS entries (' +
                'id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
                'date DATE, sitem TEXT, snumber TEXT, ' +
                'scategory TEXT, scost TEXT, simage BLOB);'
            );
        }
    );

Here is saving the record (after picture is taken)

function insertEntry() {
    var date = sessionStorage.currentDate;
    var snumber = $('#number').val();
    var sitem = $('#item').val();
        var scategory = $('#category').val();
        var scost = $('#cost').val();
        var simage = $('#image').val();
    db.transaction(
        function(transaction) {
            transaction.executeSql(
                'INSERT INTO entries (date, sitem, snumber, scategory,
scost, simage) VALUES (?, ?, ?, ?, ?, ?);',
                [date, sitem, snumber, scategory, scost, simage],
                function(){
                    refreshEntries();
                    jQT.goBack();
                },
                errorHandler
            );
        }
    );

}

Any thoughts on what I am missing?

Thanks.

Answer 1

You have to convert the image (val() isn't going to work) to Base64 via the toDataUrl function of the Canvas...

See Jesse MacFadyen article on doing this here. One little gotcha, if the image server source is not the same the page source this code is not going to work outside of Phonegap due to not having an origin-clean flag in the canvas, however this does not affect the page when running in Phonegap...