How to display the images in phonegap from server response

Question

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);
    }

@ρяσѕρєяK my respone is stored in my DB.. i don't understand the response it is automatically generated in phprunner. — Vini, Dec 18 '13 at 05:43
response string is JSONArray so you will first need to parse then store all values in db — ρяσѕρєя K, Dec 18 '13 at 05:47
@ρяσѕρєяK after parsing only i get the above result... — Vini, Dec 18 '13 at 05:48

Ved · Answer 1 · 2013-12-18T07:00:03.337

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

edited Dec 18 '13 at 07:00

answered Dec 18 '13 at 06:48

Ved

2,701
2
22
30

for your knoledge to display json data on phonegap – Ved Dec 18 '13 at 07:26
you can simply store object in window.localStorage and use it – Ved Dec 18 '13 at 08:06
Simply you should store only image path of server. Because mobile has limted memory. – Ved Dec 18 '13 at 08:25
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/43408/discussion-between-ved-and-ela) – Ved Dec 18 '13 at 09:44
i stored in DB files/s3fngaj74y37jgk.png i want to show this in my canvas tag ...please help me to do this.. – Vini Dec 18 '13 at 12:57

score -1 · Answer 2 · answered Dec 18 '13 at 06:08

-1

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}

answered Dec 18 '13 at 06:08

Darshan

2,272
3
31
43

How to display the images in phonegap from server response

2 Answers2