Saving a SVG Image as PNG image on server

In this article i will share a code sample which i used to convert a svg image into BASE64 encoded image and then save that Image on server.
Here are the steps that I have used

1. I have a Razor view where I am using a AmChart to load chart, this chart is rendered using SVG.

2. Now I will add a canvas element in that View.

3. use Canvg to copy SVG image into Canvas element (created in Step 2).

4. Once image is copied in Canvas i will create a Image element and read Canvas content in that image , which will be BASE64 encoded.

5. Once image is loaded in that Img element then do a post back on server and pass content of that image (BASE64 encoded)

6. On server convert Base64 encoded Text stream into a Binary stream and save that Binary as an PNG file at your specified location.

You can check Sample Code Here.

Using RDLC with ASP.Net MVC to export report in PDF/Excel format

To export a report in PDF/Excel format using RDLC.

1. Create a ASP.Net MVC web site.
2. Add a RDLC report and creates its DataSources and Design the report as per requirement.
3. Create an action method in your controller and use following code.

public ActionResult GetPdfReport(int month, int year, int snapshottypeid, long taskrunid)
{

//Step 1 : Create a Local Report.
LocalReport localReport = new LocalReport();

//Step 2 : Specify Report Path.
localReport.ReportPath = Server.MapPath("~/Content/UnAssignedLevelsReport.rdlc");

//Step 3 : Create Report DataSources
ReportDataSource dsUnAssignedLevels = new ReportDataSource();
dsUnAssignedLevels.Name = "UnAssignedLevels";
dsUnAssignedLevels.Value = dataSet.UnAssignedLevels;

ReportDataSource dsReportInfo= new ReportDataSource();
dsReportInfo.Name = "ReportInfo";
dsReportInfo.Value = dataSet.ReportInfo;

//Step 4 : Bind DataSources into Report
localReport.DataSources.Add(dsUnAssignedLevels);
localReport.DataSources.Add(dsReportInfo);

//Step 5 : Call render method on local Report to generate report contents in Bytes array
string deviceInfo = "<DeviceInfo>" +
"  <OutputFormat>PDF</OutputFormat>" +
"</DeviceInfo>";
Warning[] warnings;
string[] streams;
string mimeType;
byte[] renderedBytes;
string encoding;
string fileNameExtension;
//Render the report          
renderedBytes = localReport.Render("PDF", deviceInfo, out mimeType, out encoding, out fileNameExtension, out streams, out warnings);


//Step 6 : Set Response header to pass filename that will be used while saving report.
Response.AddHeader("Content-Disposition",
"attachment; filename=UnAssignedLevels.pdf");

//Step 7 : Return file content result
return new  FileContentResult(renderedBytes, mimeType);
}

4. While deploying code to a development/production server make sure following assemblies are referred from correct location and for them set CopyLocals as True.

Namespaces in Javascript

Namespacing in Javascript can be achieved in following ways

1. Single global variables

2. Prefix namespacing

3. Object literal notation

4. Nested namespacing

5. Immediately-invoked Function

6. Expressions

7. Namespace injection

Lets go in detail..

Single Global Variables:

Here we define a single Global variable which holds all methods and properties of object.

Ex.

var myExApplication =  (function () { 

        function(){

            //...

        },

        return{

            //...

        }

})();

Disadvantage: There are high chances of conflicts same variable could be used in some other part of code.

Prefix Namespacing:
Here we select a unique prefix namespace we wish to  use (in this example, myExApplication_)  and then define any methods, variables, or other objects after the  prefix as follows

Ex.
var myExApplication_propertyA = {};
var myExApplication_propertyB = {};
function myExApplication_myMethod(){ 
  //...
}

Disadvantage: We may end up having huge number of global variables thus tough manageable code.

Object Literal Notation:
Here an object contains a collection of key-value pairs with a colon separating each pair of keys and values, where keys can also represent new namespaces.

Ex.
var myExConfig = { //myExConfig is a JSON object and it contains all methods and props.

    language: "english",

    defaults: {
        enableGeolocation: true,
        enableSharing: false,
        maxPhotos: 20
    },

    theme: {
        skin: "a",
        toolbars: {
            index: "ui-navigation-toolbar",
            pages: "ui-custom-toolbar"    
        }
    }

}

Nested Namespacing:
Its an extension of Object Literal notation where an object includes another object and which in turn may include another object and so on to achieve a more granular name spacing.

Ex.
var myApp =  myApp || {};

myApp.routers = myApp.routers || {};
myApp.model = myApp.model || {};
myApp.model.special = myApp.model.special || {}


Immediately Invoked Function Expressions (IIFE)s
In IIFEs  an unnamed function is immediately invoked after it’s been defined and a namespace is passed as a parameter to contained objects.

Ex.
var namespace = namespace || {};

// here a namespace object is passed as a function 
// parameter, where we assign public methods and 
// properties to it
(function( o ){    
    o.foo = "foo";
    o.bar = function(){
        return "bar";    
    };
})( namespace );

console.log( namespace );


Namespace Injection:
This is another variation on the IIFE in which we “inject” the methods and properties for a specific namespace from within a function wrapper using this as a namespace proxy 

Ex.
var myApp = myApp || {};
myApp.utils =  {};

(function () {
  var val = 5;

  this.getValue = function () {
      return val;
  };
   
  this.setValue = function( newVal ) {
      val = newVal;
  }
      
  // also introduce a new sub-namespace
  this.tools = {};
    
}).apply( myApp.utils );  

// inject new behaviour into the tools namespace
// which we defined via the utilities module

(function () {
    this.diagnose = function(){
        return "diagnosis";   
    }
}).apply( myApp.utils.tools );