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

前端未结

关注

 1  1366

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-expo

相关标签:

1条回答

误落风尘

2021-01-07 07:15

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>

0 讨论(0)