Nevron .NET Vision Documentation
Direct Image Streaming

Streaming an Image to the Browser

There are two ways to directly create a chart/diagram image without having a web form with a Nevron Chart/Diagram control in it: via an HTTP handler and via an image generating ASP.NET page.

HTTP Handler

To render a chart/diagram from an HTTP handler, the following steps must be performed:

  1. Add the HTTP handler class to the App_Code folder of your web site. The HTTP handler class must implement the IHttpHandler.
  2. Add the required using statements:

    If you are using Nevron Chart for .NET:

    C#
    Copy Code
    using System.IO;
    using System.Drawing;
    
    using Nevron.UI.WebForm.Controls;
    using Nevron.GraphicsCore;
    using Nevron.Dom;
    
    using Nevron.Chart;
    using Nevron.Chart.WebForm;
    
    Visual Basic
    Copy Code
    Imports System.IO
    Imports System.Drawing
    
    Imports Nevron.UI.WebForm.Controls
    Imports Nevron.GraphicsCore
    Imports Nevron.Dom
    
    Imports Nevron.Chart
    Imports Nevron.Chart.WebForm
    

    If you are using Nevron Diagram for .NET:

    C#
    Copy Code
    using System.IO;
    using System.Drawing;
    
    using Nevron.GraphicsCore;
    using Nevron.Diagram;
    using Nevron.Diagram.Shapes;
    using Nevron.Diagram.WebForm;
    
    Visual Basic
    Copy Code
    Imports System.IO
    Imports System.Drawing
    
    Imports Nevron.GraphicsCore
    Imports Nevron.Diagram
    Imports Nevron.Diagram.Shapes
    Imports Nevron.Diagram.WebForm
    

    Make sure the corresponding Nevron assemblies are referenced by the web site.An easy way to achieve this is to drop a chart/diagram control to some web form that is part of the project and then to remove it. Visual Studio will add all required references to the web site automatically.

  3. In the ProcessRequest method read any possible request fields that will configure the chart/diagram, then add code that is similar to the following snippet:

    If you are using Nevron Chart for .NET:

    C#
    Copy Code
    MemoryStream ms = new MemoryStream();
    NSize chartSize = new NSize(500, 200);
    NDocument document = CreateDocument(chartSize);
    NPngImageFormat imageFormat = new NPngImageFormat();
    using(INImage image = CreateImage(document, chartSize, imageFormat))
    {
          document.Refresh();
          image.SaveToStream(ms, imageFormat);
    }
    
    byte[] bytes = ms.GetBuffer();
    context.Response.ContentType = "image/png";
    context.Response.OutputStream.Write(bytes, 0, bytes.Length);
    context.Response.Cache.SetCacheability(HttpCacheability.ServerAndPrivate);
    
    Visual Basic
    Copy Code
    Dim Ms As MemoryStream = New MemoryStream()
    Dim ChartSize As NSize  = New NSize(500, 200)
    Dim Document As NDocument = CreateDocument(ChartSize)
    Dim ImageFormat As NPngImageFormat = New NPngImageFormat()
    Using Image As INImage = CreateImage(Document, ChartSize, ImageFormat)
        Document.Refresh()
        Image.SaveToStream(Ms, ImageFormat)
    End Using
    
    Dim bytes() As Byte = Ms.GetBuffer()
    Context.Response.ContentType = "image/png"
    Context.Response.OutputStream.Write(bytes, 0, bytes.Length)
    Context.Response.Cache.SetCacheability(HttpCacheability.ServerAndPrivate)
    

    If you are using Nevron Diagram for .NET:

    C#
    Copy Code
    NDrawingDocument document = CreateDocument();
    NCanvas canvas = CreateCanvas(document);
    
    document.RefreshAllViews();
    canvas.DoLayout();
    
    MemoryStream ms = new MemoryStream();
    
    NPngImageFormat imageFormat = new NPngImageFormat();
    using(INImage image = CreateImage(document, canvas, canvas.Size, imageFormat))
    {
          image.SaveToStream(ms, imageFormat);
    }
    
    byte[] bytes = ms.GetBuffer();
    context.Response.ContentType = "image/png";
    context.Response.OutputStream.Write(bytes, 0, bytes.Length);
    context.Response.Cache.SetCacheability(HttpCacheability.ServerAndPrivate);
    
    Visual Basic
    Copy Code
    Dim Document As NDrawingDocument = CreateDocument()
    Dim Canvas As NCanvas = CreateCanvas(Document)
    
    Document.RefreshAllViews()
    Canvas.DoLayout()
    
    Dim Ms As MemoryStream = New MemoryStream()
    
    Dim ImageFormat As NPngImageFormat = New NPngImageFormat()
    Using Image As INImage = CreateImage(Document, Canvas, Canvas.Size, ImageFormat)
          Image.SaveToStream(Ms, ImageFormat)
    End Using
    
    Dim Bytes() As Byte = Ms.GetBuffer()
    Context.Response.ContentType = "image/png"
    Context.Response.OutputStream.Write(Bytes, 0, Bytes.Length)
    Context.Response.Cache.SetCacheability(HttpCacheability.ServerAndPrivate)
    
  4. Implement the CreateDocument, CreateImageand CreateCanvas(diagram only)  methods:

    If you are using Nevron Chart for .NET:

    C#
    Copy Code
    NDocument CreateDocument(NSize chartSize)
    {
        NDocument document = new NDocument();
        NChartchart = document.RootPanel.Charts[0];
        NLineSeries line = new NLineSeries();
    
        line.Values.Add(10);
        line.Values.Add(20);
        line.Values.Add(30);
        line.Values.Add(40);
    
        line.BorderStyles[0] = new NStrokeStyle(Color.Red);
        line.BorderStyles[1] = new NStrokeStyle(Color.Blue);
        line.BorderStyles[2] = new NStrokeStyle(Color.Green);
    
        chart.Series.Add(line);
        return document;
    }
    
    protected INImage CreateImage(NDocument document, NSize size, NPngImageFormat imageFormat)
    {
        INImageFormatProvider imageFormatProvider = new NChartRasterImageFormatProvider(document);
        return imageFormatProvider.ProvideImage(size, NResolution.ScreenResolution, imageFormat);
    }
    
    Visual Basic
    Copy Code
    Function CreateDocument(ByVal ChartSize As NSize) As NDocument 
        Dim Document As NDocument = New NDocument()
        NChartchart = Document.RootPanel.Charts(0)
        Dim Line As NLineSeries = New NLineSeries()
    
        Line.Values.Add(10)
        Line.Values.Add(20)
        Line.Values.Add(30)
        Line.Values.Add(40)
    
        Line.BorderStyles(0) = New NStrokeStyle(Color.Red)
        Line.BorderStyles(1) = New NStrokeStyle(Color.Blue)
        Line.BorderStyles(2) = New NStrokeStyle(Color.Green)
    
        chart.Series.Add(Line)
        return Document
    End Function
    
    Protected Function CreateImage(ByVal Document As NDocument, ByVal Size As NSize, ByValImageFormat As NPngImageFormat) As ProtectedINImage
        Dim ImageFormatProvider As INImageFormatProvider = New NChartRasterImageFormatProvider(Document)
        Return ImageFormatProvider.ProvideImage(Size, NResolution.ScreenResolution, ImageFormat)
    End Function
    

    If you are using Nevron Diagram for .NET:

    C#
    Copy Code
    NDrawingDocument CreateDocument()
    {
        NDrawingDocument document = new NDrawingDocument();
    
        document.MeasurementUnit = NGraphicsUnit.Pixel;
        document.ViewLayout = CanvasLayout.Fit;
        document.DocumentPadding = new Nevron.Diagram.NMargins(10);
    
        document.BeginInit();
    
        document.Bounds = new NRectangleF(0, 0, 420, 320);
        document.BackgroundStyle.FrameStyle.Visible = false;
        NBasicShapesFactory factory = new NBasicShapesFactory(document);
    
        NEllipseShape ellipse = factory.CreateShape((int)BasicShapes.Ellipse) as NEllipseShape;
        ellipse.Name = "myEllipse";
        ellipse.Width = 250f;
        ellipse.Height = 250f;
        ellipse.Center = new NPointF(200, 200);
        ellipse.Style.FillStyle = new NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant1, Color.Navy, Color.White);
    
        document.ActiveLayer.AddChild(ellipse);
        document.EndInit();
    
        document.SizeToContent();
        return document;
    }
    
    NCanvas CreateCanvas(NDrawingDocument document)
    {
        NCanvas canvas = new NCanvas(document);
        canvas.Layout = CanvasLayout.Normal;
        canvas.ScaleX = 1;
        canvas.ScaleY = 1;
        canvas.GlobalVisibility = new NGlobalVisibility();
        canvas.GlobalVisibility.ShowPorts = false;
        canvas.Size = new NSize((int)document.Width, (int)document.Height);
        canvas.GraphicsSettings = document.GraphicsSettings;
    
        return canvas;
    }
    
    protected INImage CreateImage(NDrawingDocument document, NCanvas canvas, NSize size, NPngImageFormat imageFormat)
    {
        INImageFormatProvider imageFormatProvider = new NDiagramRasterImageFormatProvider(document, canvas);
        return imageFormatProvider.ProvideImage(size, NResolution.ScreenResolution, imageFormat);
    }
    
    Visual Basic
    Copy Code
    Function CreateDocument() As NDrawingDocument 
        Dim Document As NDrawingDocument = New NDrawingDocument()
    
        Document.MeasurementUnit = NGraphicsUnit.Pixel
        Document.ViewLayout = CanvasLayout.Fit
        Document.DocumentPadding = New Nevron.Diagram.NMargins(10)
    
        Document.BeginInit()
    
        document.Bounds = new NRectangleF(0, 0, 420, 320)
        document.BackgroundStyle.FrameStyle.Visible = False
        Dim Factory As NBasicShapesFactory = New NBasicShapesFactory(Document)
    
        Dim Ellipse As NEllipseShape = TryCast(Factory.CreateShape(CInt(BasicShapes.Ellipse)), NEllipseShape)
        Ellipse.Name = "myEllipse"
        Ellipse.Width = 250F
        Ellipse.Height = 250F
        Ellipse.Center = New NPointF(200, 200)
        Ellipse.Style.FillStyle = New NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant1, Color.Navy, Color.White)
    
        Document.ActiveLayer.AddChild(Ellipse)
        Document.EndInit()
    
        Document.SizeToContent()
        return Document
    End Function
    
    Function CreateCanvas(ByVal Document As NDrawingDocument) As NCanvas
        Dim Canvas As NCanvas = New NCanvas(Document)
        Canvas.Layout = CanvasLayout.Normal
        Ccanvas.ScaleX = 1
        Canvas.ScaleY = 1
        Canvas.GlobalVisibility = New NGlobalVisibility()
        Canvas.GlobalVisibility.ShowPorts = False
        Canvas.Size = New NSize(CInt(Document.Width), CInt(Document.Height))
        Canvas.GraphicsSettings = Document.GraphicsSettings
    
        return Canvas
    End Function
    
    Protected Function CreateImage(ByVal Document As NDrawingDocument, ByVal Canvas As NCanvas, ByVal Size As NSize, ByVal ImageFormat As NPngImageFormat) As INImage
        Dim ImageFormatProvider As INImageFormatProvider = New NDiagramRasterImageFormatProvider(Document, Canvas)
        Return ImageFormatProvider.ProvideImage(Sze, NResolution.ScreenResolution, ImageFormat)
    End Function
    
  5. Define the HTTP handler from your web.config file:

    web.config
    Copy Code
    <system.web>
      <!—- IIS 5 and IIS 6 related configuration -->
        <httpHandlers>
          <add path="DirectImage.axd" verb="*" type="MyNamespace.MyImageHandler" validate="false" />
        </httpHandlers>
    </system.web>
     
    ...
     
    <system.webServer>
       <!—- IIS 7 related configuration -->
       <handlers>
          <remove name="DirectImage" />
       ...
          <add name="DirectImage" preCondition="integratedMode" verb="*" path="DirectImage.axd" type="MyNamespace.MyImageHandler" />
       </handlers>
    </system.webServer>
    
  6.   Run the web site and test the HTTP handler by entering an URL in the web browser, similar to the following:

    http://localhost:2222/WebSite1/DirectImage.axd?myField=value

    The web browser should display a sample chart or diagram.

Image Generating ASP.NET Page

The NImageResponse object has a property called StreamImageToBrowser which instructs the control to directly stream the image in the HTTP response rather than generating an image to the server. When the control streams an image to the browser it will automatically change the MIME type of the response. Directly streaming an image always involves two pages - the first page must contain an HTML img tag with a src attribute pointing to the second page that actually generates the component output. The second page must not have any content other than the chart itself. For example consider the following two pages:

 

1. Page one containing the img tag (Page1.html)

HTML
Copy Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
   <HEAD>
      <TITLE></TITLE>
      <META NAME="GENERATOR" Content="Microsoft Visual Studio 7.0">
   </HEAD>
   <BODY>
      <DIV id="DIV1" ms_positioning="FlowLayout">
         <TABLE height="44" cellSpacing="0" cellPadding="0" width="400" border="0" ms_1d_layout="TRUE">
            <TR>
               <TD>Demonstrates the ability of Nevron Chart for .NET to binary stream an
               image to the browser without generating a file on the server</TD>
            </TR>
        </TABLE>
     </DIV>
     <IMG height="400" width="400" alt="" src="Page2.aspx" >
   </BODY>
</HTML>

2. Page two generating the chart image (Page2.aspx)

 

HTML
Copy Code
<%@ Page language="c#" %>
<%@ Register TagPrefix="ncwc" Namespace= "Nevron.Chart.WebForm" Assembly="Nevron.Chart.WebForm"%>
<%@ Import namespace = "System.Drawing"%>
<%@ Import namespace = "Nevron.Chart.WebForm"%>
<%@ Import namespace = "Nevron.Chart"%>
<%@ Import namespace = "Nevron"%>
<%@ Import namespace = "Nevron.GraphicsCore"%>

<%
// initialize the output of the component
// create either a drawing view or a chart
// [theComponent] is a valid instance of either NChartControl or NDrawingView
// update the server settings

[theComponent].ServerSettings.BrowserResponseSettings.BrowserResponsePairs.Clear();

NImageResponse imageResponse = new NImageResponse();
imageResponse.StreamImageToBrowser = true;
[theComponent].ServerSettings.BrowserResponseSettings.DefaultResponse = imageResponse;

// by providing null as a HtmlTextWriter the control
// will automatically change the MIME type of the page
[theComponent].RenderControl(null);
%>
See Also

 

 


©2017. Nevron Software LLC.

Send Feedback