WebImage Sample

Sample ASP.Net application for learning how to use WebImage to create and manipulate images server side. Then, use html canvas on client side to render and manipulate.

No image files are saved server side in this example, only rendered back to the page using Data URL's to allow Javascript to work with the images on a canvas.

I prefer using heavily commented code to explain things as opposed to lengthy blog entries.

Reading code directly is always better! :)

Some things you should be familiar with first:

• HTML Canvas - http://www.html5canvastutorials.com/
• Javascript - https://developer.mozilla.org/en-US/docs/Learn/JavaScript
• Data URL - https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
• C# Razor - http://www.w3schools.com/asp/razor_intro.asp
• Base64 Encoding - https://en.wikipedia.org/wiki/Base64

Server Side - C# Razor Code (index.cshtml)

    // Some server vars to hold data
    WebImage image = null;
    WebImage myChart = null;
    string imagebase64string = "";
    string chartbase64string = "";
    string errorMsg = "";
// Uploaded image?
if (IsPost)
{
    try
    {
        image = WebImage.GetImageFromRequest();
    }
    catch (Exception e)
    {
        // Something went wrong getting the uploaded WebImage. Set exception msg to show user
        errorMsg = e.Message;
    }

    // Do we have image object?
    if (image != null)
    {
        // Convert the image bytes to base64 string for use in the data URL
        imagebase64string = Convert.ToBase64String(image.GetBytes());
    }
}

// Sample chart to use: Credit: https://www.asp.net/web-pages/overview/data/7-displaying-data-in-a-chart
// NOTE: Using ToWebImage() method to convert the chart into a WebImage object
myChart = new Chart(width: 300, height: 200)
    .AddTitle("ASP.NET Chart")
    .AddSeries(
        name: "Employee",
        xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
        yValues: new[] { "2", "6", "4", "5", "3" })
    .ToWebImage();

// Convert the chart image bytes to base64 string to use in the data URL
chartbase64string = Convert.ToBase64String(myChart.GetBytes());

Client Side - HTML with Canvas (index.cshtml)

<div class="row">
    <div class="col-md-4">
        <canvas id="my-chart-canvas" width="300" height="200"></canvas>
    </div>
    <div class="col-md-4">
        <canvas id="my-image-canvas" width="300" height="200"></canvas>
    </div>
    <div class="col-md-4">
        <form action="" method="post" enctype="multipart/form-data">
            <fieldset>
                <legend> Upload Image </legend>
                <label for="Image">Image</label>
                <input type="file" name="Image" />
                <br />
                <input type="submit" value="Upload" />
            </fieldset>
        </form>
    </div>
</div>

Client Side - Javascript Code (index.cshml)

        // canvas elements are used for rendering images
        var chartCanvas = document.getElementById('my-chart-canvas');
        var imageCanvas = document.getElementById('my-image-canvas');
    // Canvas context used to do the actual drawing onto canvas
    var chartCtx = chartCanvas.getContext('2d');
    var imageCtx = imageCanvas.getContext('2d');

    // Create new Image objects in JS to work with images in the browser
    var chartImg = new Image;
    var imageImg = new Image;

    // Setup events to handle drawing the images on canvas after the Image objects src is set
    chartImg.onload = function () {
        chartCtx.drawImage(chartImg, 0, 0);
    }   
    imageImg.onload = function () {
        // Using a nice little function to draw the image on canvas
        drawImageProp(imageCtx, imageImg, 0, 0, imageCanvas.width, imageCanvas.height, 0.1, 0.5);
    }

    // Set the src property for the Image objects using Data URL format. This triggers onLoad event drawing onto canvas.
    // NOTE: Injecting the value of the base64 strings into the JS code on server side using @ Razor syntax 
    chartImg.src = 'data:image/jpeg;base64,@chartbase64string';
    imageImg.src = 'data:image/jpeg;base64,@imagebase64string';
</code>