Rotate base64 image using javascript and canvas

1. Create a canvas object in javascript

    var canvas  = document.createElement("canvas");

2. By default the height and width of the canvas will be 150px so we need to make canvas size exactly equivalent to the our source image. By creating the image object we can get the actual source image size. 

  

   var img = new Image();

   img.src = << Your base 64 string of source image >> 

  

3. Adjust the canvas size. 

 canvas.width  = img.width;

 canvas.height = img.height;

4.  Set the canvas context, and transform and rotate the canvas image, 

var context = canvas.getContext("2d");

context.translate(img.width, img.height);

context.rotate(180 * Math.PI / 180);

5.  Draw the rotated image in to canvas 

context.drawImage(img, 0, 0);

6. Get the new image base64 url 

var rotatedImageSrc =  canvas.toDataURL();

function rotateBase64Image(base64ImageSrc) {
 var canvas = document.createElement("canvas");
 var img = new Image();
 img.src = base64ImageSrc;
 canvas.width = img.width;
 canvas.height = img.height;
 var context = canvas.getContext("2d");
 context.translate(image.width, image.height);
 context.rotate(180 * Math.PI / 180);
 context.drawImage(image, 0, 0); 
 return canvas.toDataURL();
}

Prevent to open multiple windows from window.open function

function launchApplication(l_url, l_windowName)
{
  if ( typeof launchApplication.winRefs == 'undefined' )
  {
    launchApplication.winRefs = {};
  }
  if ( typeof launchApplication.winrefs[l_windowName] == 'undefined' || launchApplication.winrefs[l_windowName].closed )
  {
    var l_width = screen.availWidth;
    var l_height = screen.availHeight;

    var l_params = 'status=1' +
                   ',resizable=1' +
                   ',scrollbars=1' +
                   ',width=' + l_width +
                   ',height=' + l_height +
                   ',left=0' +
                   ',top=0';

    launchApplication.winrefs[l_windowName] = window.open(l_url, l_windowName, l_params);
    launchApplication.winrefs[l_windowName].moveTo(0,0);
    launchApplication.winrefs[l_windowName].resizeTo(l_width, l_height);
  } else {
    launchApplication.winrefs[l_windowName].focus()
  }
}

Disable Image button

 I used this code:  OnClientClick="DisableLink(this);"

This is the JS function:

function DisableLink(obj) {
    obj.disabled = 1;
    obj.style.visibility = "hidden";
    obj.style.display = "none";
} 

Find Control inside any repeater row or html row using Jquery

To find the control just pass the current row object from any front end page(ASPX, PHP, HTML etc)

1. row.all will give all the elements present in the row
2. use find method to find the element of particular id. I used id*= any id which contains lblName. i have only one label.

function FindConrol(row) {
            var label = $(row.all).find('[id*=lblName]');
            alert(label.text());
        }

we can perform the same operation using .each function

This idea is better than using
row.cell[cellnumber].all[elementNumber] 

WCF - Windows Communication Foundation - Message Logging

Add the below lines in WCF web.config file : 

<system.diagnostics>
  <sources>
      <source name="System.ServiceModel.MessageLogging">
        <listeners>
                 <add name="messagesListner"
                 type="System.Diagnostics.XmlWriterTraceListener"
                 initializeData="c:\logfolder\messages.svclog" />
          </listeners>
      </source>
    </sources>
</system.diagnostics>

<system.serviceModel>
  <diagnostics>
    <messageLogging 
         logEntireMessage="true" 
         logMalformedMessages="false"
         logMessagesAtServiceLevel="true" 
         logMessagesAtTransportLevel="false"
         maxMessagesToLog="3000"
         maxSizeOfMessageToLog="2000"/>
  </diagnostics>
</system.serviceModel> 

In WCF two types of source available

1. System.ServiceModel.MessageLogging

2. System.ServiceModel

In this post i used xmlwriter of tracing, you can use other types of listners also.

*Note : Use svcConfigEditor to edit the wcf config file. 

Get the Control ID in javasscript from Usercontrol or Data grid

use the given javascript to  get the control client id in javascript from user control or data grid

function GetClientId(strid)
{
     var count=document.forms[0].length;
     var i=0;
     var eleName;
     for (i=0; i < count; i++ )
     {
       eleName=document.forms[0].elements[i].id;
       pos=eleName.indexOf(strid);
       if(pos>=0)  break;           
     }
    return eleName;
 }

Javascript in usercontrol and custom control

In this article i will tell you how to add javascript in user control(Embedded source) and custom control
First if you have user control then you need to convert into custom control for this you read my article of this month DLL for user control.
if you have custom control open the Assembly.cs file

Step 1: Create javascript file and add into the solution
Step 2: please make sure your javascript should not have '<%= Control.ClientID %>' beacuse register start up script will not allow to find the control

Step 3: Use below javascript for finding the control in usercontrol or gridview

 function GetClientId(strid)
{
     var count=document.forms[0].length;
     var i=0;
     var eleName;
     for (i=0; i < count; i++ )
     {
       eleName=document.forms[0].elements[i].id;
       pos=eleName.indexOf(strid);
       if(pos>=0)  break;           
     }
    return eleName;
 }


Step 4: Change the build type to Embedded in your javascript file property.

Step 5:  In Assembly.cs file add line
[assembly:WebResource("Virtual_KeyBoard.VKScript.js", "text/javascript")], you need web.Ui package for this. In my case VKScript is the name of the javascript





Step 6:  Override the OnPreRender function in class file of solution  and add below lines

There are two different -2 technique to embedded the javascript

Technique 1:

ClientScriptManager cs = this.Page.ClientScript;
            using (StreamReader reader = new StreamReader(this.GetType().Assembly.GetManifestResourceStream(GetType(), "VKScript.js")))
            {
                string scriptCode = reader.ReadToEnd();
                cs.RegisterClientScriptBlock(this.GetType(),"Javascript", scriptCode, true);
            }

"This will show the script in page souce"

Techinique 2:
string resouce = "Virtual_KeyBoard.VKScript.js";
ClientScriptManager cs = this.Page.ClientScript;
cs.RegisterClientScriptResource(typeof(VirtualKeyBoard), resouce);

Webresouce.axd dynamically create script
example

<script src="/WebResource.axd?d=VGoSv7soghuqEqTXl_W8OcnRS_O6Sg_HFkP0Q7N6Kx3NtQ9dpBsCA7PnQRnxaS883X54KD66o8kcW6NDHr7vpRMHM5sNF6B2Fsn7tArccVnRO03aF55GsI6Dz12tfkiF3AW04g2&t=634574601134363084" type="text/javascript"> 

script>

Thanks for reading this article. if you like this article please comment on this article.

Install XP From USB Drive

Installing the xp from the pen drive is very easy and faster then cd/dvd drive

Step 1: Make your pend drive bootable
for making your pen drive bootable download the below given zip file

http://www.mediafire.com/?twixh1iid8cltoh

Step 2: Insert the USB drive and  extract the downloaded zip file.

Step 3: Run HP USB Formatter exe file.

Step 4: Select the Option create dos start up disk

Step 5: Using file system located at option : select extracted folder




Step 6:  Click start and format the Usb drive

Step7: Copy all the files from the extracted folder to Usb drive.

Step 8: Copy all files from Xp cd to Pen drive.

Step 9: Boot your System and select change boot option menu ( there are several different keys for this ) del, f10, f9 , f11 depands upon the system.

Step 10: Select the usb drive for booting the type SYS d: and press enter key, system will show system transferred.

Step 11: Then type nc - Nortan commander copy all files from pendrive to c drive

Step 12: Then type cd i386 and press enter

Step 13: Then type winnt and press enter key Sytem will start installing xp normal as cd/dvd drive.

Create DLL for User Control ( Redistribution )

In this article i will tell you how to create dll from the user control and use that dll in other web application in .net

Step1: Create a class library solution in visual studio.

Step 2: In references add the reference of System.Web dll

Step3: In class file add the namespaces
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Reflection;

Step 4: Add the User control but remove ascx.cs file and designer file and change ascx page control directive
<%@ Control Language="C#" AutoEventWireup="true" %>In my case user control is ( "VKBoard.ascx" ). then go to the property of the user control and change build action to embedded resource

Step5: in class file override the oninit () function

protected override void OnInit(EventArgs e)
{
base.OnInit(e);
// loads markup from embedded resource
string content = String.Empty;
Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(GetType(), "VKBoard.ascx");
using (StreamReader reader = new StreamReader(stream))
{
content = reader.ReadToEnd();
}
Control userControl = Page.ParseControl(content);
this.Controls.Add(userControl);

//Put content is my function for adding the text in the control or what you want to do with control add initialization time
PutContent();
}


Step 6: Compile the solution

Step 7: Go to the solution directory and then in bin folder you will get the debug or release folder.
take the dll from there

So now you have a dll

Step 8: Add the reference of the dll (in my case it is virtualkeyboardlib.dll)

Step 9: in aspx page ragister the control

<%@ Register Namespace="VirtualKeyBoardLib" Assembly="VirtualKeyBoardLib" TagPrefix="CC" %>

Step 10: Use the control in aspx page



for more knowledge i am posting the whole files code and image below:



Code for VirtualKeyBoardlib.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Reflection;

namespace VirtualKeyBoardLib
{
public class VirtualKeyBoardLib : UserControl
{
private List DataPosition = new List();
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
// loads markup from embedded resource
string content = String.Empty;
Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(GetType(), "VKBoard.ascx");
using (StreamReader reader = new StreamReader(stream))
{
content = reader.ReadToEnd();
}
Control userControl = Page.ParseControl(content);
this.Controls.Add(userControl);
PutContent();
}

private void PutContent()
{
Random randomnum = new Random();
for (int i = 0; i < 10; i++)
{

while (true)
{
int value = randomnum.Next(0, 10);
if (DataPosition.Contains(value))
continue;
else
{
DataPosition.Add(value);
string buttonid = "Button" + (value + 1);
Button btn = (Button)this.FindControl(buttonid);
btn.Text = i.ToString();
break;
}
}
}
}



}
}

VKBoard.ascx



Add dll in other project



Default.aspx


Output:



thanks for reading this article. If you really like this please comment on this article and give your valuable response.