Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Sending image from Windows 8 HTML5 (Javascript) application to a server throw a webservice

leave a comment »

Want to send an image to a Server then save it in an easy way in HTML 5 application. Download sample code from MSDN Here

  • We will send the image throw a web service sure we’ll use a soap web service (Not JSON IF YOU DON’T KNOW WHY READ ABOUT THEM)
  • We will use the camera API in Windows 8 to capture the photo
  • The image will be in blob format so we need in the server to convert it to base64 string so we can save it
  • Re-size the image size because of the mobility capabilities and user’s internet balance
  • We’ll use Windows RunTime component to receive the soap web service. Read more about consuming here

Procedures :

1)Add new Windows 8 Store app JavaScript black project.
2)In the solution add new Windows Runtime Component C# to consume the web service
3)Add a WCF Application.
Now we want to send the image from the device to the server but in which format should we send it ?? as byte array , blob , stream or base64. We will use base64 so we can convert it in the server side to an image to save.
In the WCF application we want to receive a string as base64 string and convert it to an Image but we should substring the string base64 because JavaScript adds additional code to the string.
This is the function that convert the string to image and save it

public string SubmitTrafficViolation(ImageObject TV)

        {

            string n = TV.ImageString;

            string base64 = n.Substring(22);

            Byte[] bitmapData = new Byte[base64.Length];

            bitmapData = Convert.FromBase64String(base64);

            Image imageRecivedFromStream = byteArrayToImage(bitmapData);

            imageRecivedFromStream.Save(“d:\\newImage.png”, System.Drawing.Imaging.ImageFormat.Png);

            return“Received”;

        }

        public Image byteArrayToImage(byte[] byteArrayIn)

        {

            var ms = ne wMemoryStream(byteArrayIn, 0, byteArrayIn.Length);

            Image returnImage = Image.FromStream(ms);

            return returnImage;

        }

4)In the Windows Runtime Component class we want to receive the web service. Add a service reference , add a function to get the string(Image) from the HTML application and send it as a property of an object to the server (Why property of an object because if you want to get more information like name , date you just add the property in the web service and add it to the object in the Windows Runtime Component class)

async private static Task<string> SubmitViolation(string imageString)

        {

            return awaitTask.Run(async () =>

            {

                var client = new ServiceReference1.ImageServiceClient();

                ServiceReference1.ImageObject Iobject = new ServiceReference1.ImageObject();

                Iobject.ImageString = imageString;

                return await client.SubmitTrafficViolationAsync(Iobject);

            });

        }

        public static Windows.Foundation.IAsyncOperation<string> getData(double Longitude, double latitude, string comment, string imageString)

        {

            return SubmitViolation(imageString).AsAsyncOperation();

        }

5)Now it’s the JavaScript part we want to use the camera capture to get the image. The image will be in blob format we will make a url to display it using window.URL.createObjectURL this function creates a URL to the image.
After that we can convert it to string base64 but we need to re-size it to smaller size. to do both we use a canvas.
HTML

<buttonid=”btn_Capture”>Capture Violation</button>

    <buttonid=”SendButton”>Send Image</button>

    <imgsrc=”images/logo.png”id=”image”/>

    <canvaswidth=”100″height=”100″id=”canvas”  style=”border:1pxsolid#d3d3d3;“/>

JavaScript

document.getElementById(“SendButton”).addEventListener(“click”, function (e) {

                    var c = document.getElementById(“canvas”);

                    var ctx = c.getContext(“2d”);

                    var img = document.getElementById(“image”);

                    ctx.drawImage(img, 0, 0, 100, 100);

                    var objectURL = c.toDataURL();

                    var dataClass = ImageProxyComponent.ImageProxyClass;

                    dataClass.getData(0, 0, “any thing”, objectURL).then(function (result) {

                        (new Windows.UI.Popups.MessageDialog(result)).showAsync();

                    });

                });

                document.getElementById(“btn_Capture”).addEventListener(“click”, function (e) {

                    var camera = new capture.CameraCaptureUI();

                    camera.captureFileAsync(capture.CameraCaptureUIMode.photo).then(function (file) {

                        if (file != null) {

                            _photo = file;

                            var objectURL = window.URL.createObjectURL(_photo, { oneTimeOnly: true });

                            document.getElementById(“image”).src = objectURL;

                            var img = document.getElementById(“image”);

                            img.height = 200;

                            img.width = 300;

                        }

                    });

                });

Now run the project and get the picture

Ibraheem Osama Mohamed
@IbraheemOsamaMo

Advertisements

Written by Ibraheem Osama Mohamed

October 6, 2012 at 2:45 pm

Posted in Windows 8

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: