开发者

call webservice function using javascript and HTML5

I have a web service that contains function returning array of bits. I want to use javascript and html5 to draw this array of bits in imagebox for example , the array of bits form image

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
         CodeBehind="Default.aspx.cs" Inherits="testDICOMImageDraw._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  <script type="text/javascript">
    alert("WebService1.asmx");
    var data;

    function draw(data) {
        alert("withing the function");
        var i = 0,
            image = document.getElementById('image'),
            pixel;
        for (; i < data.length; i++) {
            pixel = document.createElement('div');
            pixel.className = (data[i]) ? 'on' : 'off';
            image.appendChild(pixel)
        }
    }

开发者_如何学运维    function fail() {
        alert('request failed');
    }

    data = WebService1.imageArray('s//s/', draw, fail);

  </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <div id="image">
  </div>
</asp:Content>

The web service function is

[WebMethod]
public byte[] imageArray(string path)
    {
        return new byte[] { 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0 };
    } 

Both the site and the web service are in the same project.


Use the following code. Replace WebService1.getImage with your service name and the function that returns your data.

<div id="image"></div>
<script type="text/javascript">
function draw(data)
{
    var canvas = document.getElementById('image'),
        ctx = canvas.getContext('2d'),
        imgLength = 4,
        size = 50;

    canvas.width = canvas.height = 200;

    for(var x = 0; x < imgLength; x++){
       for(var y = 0; y < imgLength; y++){
           if(data[y * imgLength + x]){
               ctx.fillRect(x*size, y*size, size, size)
           }
       } 
    }
}

function fail()
{
    alert('request failed');
}

WebService1.getImage(draw, fail);
</script>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜