call webservice function using javascript and HTML5

Question

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.

imagebox is what? Why does the webservice not just return the image? document.getElementById("imgId").src = "yourWebservice.php"; — epascarello
– epascarello, Commented Aug 19, 2011 at 19:39
Have a look at the canvas element - diveintohtml5.org/canvas.html — arunkumar
– arunkumar, Commented Aug 19, 2011 at 19:39
You'll need to provide more information on the "array of bits" returned by your webservice call. Is it in a JSON string representation? "[1,0,0,1,0,1,1,0]" for example? To draw it on the screen, you would use a <canvas>. — BishopRook
– BishopRook, Commented Aug 19, 2011 at 19:40

Ryan Kinal · Accepted Answer · 2011-08-31 20:34:01Z

4

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>

answered Aug 31, 2011 at 20:34

Ryan Kinal

17.8k7 gold badges48 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AMH Over a year ago

I update my question with code , but it doesn't work , any suggestion

Collectives™ on Stack Overflow

call webservice function using javascript and HTML5

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related