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

How to display the images in phonegap from server response

本文关键字：显示 phonegap 图像 响应 服务器      更新时间：2023-09-26

当将值从服务器发布到我的phonegap应用程序时，我的服务器中有一个签名板，我得到的响应如下：如何使用该响应存储到DB中并显示在我的phoneap中。

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

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

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

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

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