How to display images in phonegap from server response

advertisements

I have a signature pad in my server when posted the values from server to my phonegap application i get the response like below how to use that response to store into DB and display in my phonegap.

My response after parsing JSON:

[{"searchStr":"signature.png:sStrEnd","type":"image\/png","usrName":"signature.png","size":5686,"name":"files\/x5cviyfvqelfbra.png"}]

in that response how can i get the image path or direct images.

my script for display the image in canvas

var arbeidcanvas = $('#mArbeid')[0];
    arbeidcanvas.width = arbeidcanvas.width;
    var arbeidsign = arbeidcanvas.getContext("2d");
    var arbeidimg = new Image();
    arbeidimg.src = **MYDATABASE VALUE**;
    arbeidimg.onload = function() {
         arbeidsign.drawImage(arbeidimg, 0,0);
    }


<div id="result_data"></div>
<canvas id="myCanvas" ></canvas>

 <script>
 $(document).ready(function(){
 var obj = [{"searchStr":"signature.png:sStrEnd","type":"image\/png","usrName":"signature.png","size":5686,"name":"files\/x5cviyfvqelfbra.png"}] ;
if(obj.length >0){
    var list = '<ul data-role="listview" >'
     $.each(obj, function(key, value){
        if(value.searchStr){
            list += '<li>searchStr :'+value.searchStr+'</li>';
        }
        if(value.type)
           list += '<li>type :'+value.type+'</li>';
        if(value.size)
            list += '<li>size :'+value.size+'</li>';
        if(value.name)
            list += '<li>name :'+value.name+'</li>';
     }) ;
     list += '</ul>' ;
     $("#result_data").append(list).trigger('create');
     $("#result_data").listview('refresh');

     var canvas = document.getElementById('myCanvas');
     var context = canvas.getContext('2d');
     var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = your_img_src;

 }
});
</script>

Store data in db see this link

1) http://docs.phonegap.com/en/3.0.0/cordova_storage_storage.md.html