вызвать функцию веб-сервиса с использованием JavaScript и HTML5

Question

У меня есть веб-сервис, который содержит функцию, возвращающую массив битов.Я хочу использовать javascript и html5, чтобы нарисовать этот массив битов в imagebox, например, массив битов формирует изображение

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

Функция веб-сервиса:

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

Оба сайтаи веб-сервис находятся в одном проекте.

Answer 1

Используйте следующий код.Замените WebService1.getImage именем вашей службы и функцией, которая возвращает ваши данные.

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