CODEWITHSUNDEEP
javascripthtmlcordova
Priya
Priya

Reputation: 127

How to Save Captured Picture into SQLite as blob and Retrieve back in Phonegap?

I have a created Phonegap Project that captures a Picture using Camera following the tutorial http://mobile.tutsplus.com/tutorials/phonegap/phonegap-from-scratch-camera-exporting/.Now I want to save the image as blob into a sqlite database. Also once saved retrieve and display the image. Please suggest.

Upvotes: 2

Views: 6784

Answers (1)

MSTdev
MSTdev

Reputation: 4635

Please follow below step
1. Get Your picture as base 64 using phone gap Camera API
2. Now convert Base 64 to Blob object 

function convertDataURIToBlob(dataURI, mimetype) {
    var BASE64_MARKER= ';base64,';
    var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
    var base64 = dataURI.substring(base64Index);  
    var raw = window.atob(base64);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);   
    }
    var bb = new BlobBuilder();
    bb.append(uInt8Array.buffer);
    return bb.getBlob(mimetype); 
}


Instead of passing in a mimetype though, you should extract it from the data url and use that with getBlob().
OR
use this plugin
3. Now you can save your image using phonegap Storage API to Sqlite your desired column data type is string.
4. Fetch your blob object from Sqlite using Phone gap Storage API
5. Now represent this object to HTMl tag using Java script.Here sample blob object to HTML 5 

<!DOCTYPE html>    
<html>    
<head>    
    <meta charset="utf-8" />    
    <title>Blob</title>    
    <script type="text/javascript">    
        (function () {    
            window.URL = window.URL || window.webkitURL;    
            function contentLoaded() {    
                var blob = new Blob(['alert("hello")'], { type: 'text/javascript' });    
                var script = document.createElement('script');    
                script.setAttribute('src', window.URL.createObjectURL(blob));    
                document.body.appendChild(script);    
            }    
            window.addEventListener('DOMContentLoaded', contentLoaded, false);    
        } ());    
    </script>    
</head>    
<body>    
    <div id="container">    
    </div>    
</body>    
</html>

Upvotes: 3

Related Questions