javascript - 使用 javascript 和 HTML5 调用 webservice 函数

Question

我有一个 Web 服务，其中包含返回位数组的函数。我想使用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 };
    } 

网站和 Web 服务都在同一个项目中。

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>