如何从服务器响应中显示phonegap中的图像

时间:2013-12-18 05:26:09

标签: javascript android jquery cordova

我的服务器中有一个签名板,当从服务器发布到我的phonegap应用程序时,我得到如下响应,如何使用该响应存储到数据库并显示在我的手机中。

解析JSON后我的回复:

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

在该响应中,我如何获得图像路径或直接图像。

我的脚本用于在画布中显示图像

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

2 个答案:

答案 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>

将数据存储在db中,请参阅此链接

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

答案 1 :(得分:-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);
}