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>
精彩评论