Hi,
if you are uploading the image with flie type control,and you want to reduce image size without saving the original image on the hard disk,THen you can do it like the following (this is all code behind part) :
on the button click write the code:
protected void btnSubmit_Click(object sender, EventArgs e)
{
Stream s = Request.Files["id of the file control"].InputStream;
Size size = new Size(); // size class is included in using //System.Drawing.Imaging; namespace
size = GetBigDimensions();
size = GetBigDimensions();
System.Drawing.Bitmap img = (Bitmap)System.Drawing.Bitmap.FromStream(s);
if (img.Width != size.Width || img.Height != size.Height )
{
img = (System.Drawing.Bitmap)GetThumb(new Bitmap(img), size.Width, size.Height, true, Color.White);
}
SaveImage(img, Server.MapPath("~/path of the folder where you want to store the image" + imagename variable));
}
public Size GetBigDimensions()
{
Size s = new Size(302, 204);// you can set height and width what you want
return s;
}
public Image GetThumb(Image _image, int w, int h, bool HiQuality, Color bgColor)
{
if (_image == null)
return null;
Bitmap bmp = new Bitmap(w, h);
Image img = (Image)bmp;
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage((Image)img);
g.Clear(bgColor);
if (_image.Width > w
|| _image.Height > h)
{
if (HiQuality)
{
g.CompositingQuality = CompositingQuality.HighQuality;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;
g.SmoothingMode = SmoothingMode.HighQuality;
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
}
else
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.Low;
double ratio = Math.Min(1 / ((double)_image.Width / w), 1 / ((double)_image.Height / h));
float posX = (w / 2 - (_image.Width * (float)ratio) / 2);
float posY = (h / 2 - (_image.Height * (float)ratio) / 2);
g.DrawImage(_image, posX, posY, (float)_image.Width * (float)ratio, (float)_image.Height * (float)ratio);
}
else
{
int posX2 = (int)(((double)w / 2.0) - ((double)_image.Width / 2.0));
int posY2 = (int)(((double)h / 2.0) - ((double)_image.Height / 2.0));
g.DrawImage(_image, posX2, posY2, _image.Width, _image.Height);
}
g = null;
return img;
}
public void SaveImage(System.Drawing.Image img, string path)
{
string Format = path.Substring(path.IndexOf(".") + 1);
switch (Format.ToLower())
{
case "gif":
case "jpg":
{
EncoderParameters eps = new EncoderParameters(1);
eps.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 90L);
ImageCodecInfo ici = GetEncoderInfo("image/jpeg");
img.Save(path, ici, eps);
} break;
default:
img.Save(path);
break;
}
}
private static ImageCodecInfo GetEncoderInfo(String mimeType)
{
int j;
ImageCodecInfo[] encoders;
encoders = ImageCodecInfo.GetImageEncoders();
for (j = 0; j < encoders.Length; ++j)
{
if (encoders[j].MimeType == mimeType)
return encoders[j];
} return null;
}
and you are done with it ,Its that easy.Using the above we can also reduce of image shriking.
Monday, June 29, 2009
Friday, June 12, 2009
Show Error/Succcess Messages like gmail,yahoo mail through JQuery
Hi All,
Recently i have applied new message system like what we have seen in gmail and yahoo , when we delete the message,the message come for 4-5 second and after that it just fade out. First i was thinking it is going to be though.But after i implement it,i was not all that diffcult.So below is the solution .
/******************************************************************/
First we have to place a div in the master page and have to assign id to it.
<div id="msgdiv"></div>
Make the body of the master page runat="server" and have a id for it as well.
<body id="MainBody" runat="server">
we also have to add jquery file of 1.2.1min.js file :
<script src="js/jquery-1.2.1.min.js" type="text/JavaScript"></script>
Now lets say you want to show message on deleting of message from inbox.
So add the following two functions in JavaScript:
function DeleteFromInbox() {
document.getElementById("msgdiv").className = "quick-alert";
document.getElementById("msgdiv").innerHTML = "<table border='0' align='center' cellpadding='0' cellspacing='0'><tr><td><img src='images/checked_new_icon.jpg' alt='' /></td><td width='8'> </td><td>message deleted from inbox successfully.</td></tr></table>";
setTimeout("FadeOutDiv()", 2000);
}
function ErrorInDeleteing() {
document.getElementById("msgdiv").className = "quick-alert";
document.getElementById("msgdiv").innerHTML = "<table border='0' align='center' cellpadding='0' cellspacing='0'><tr><td><img src='images/checked_new_icon.jpg' alt='' /></td><td width='8'> </td><td>message was not deleted from inbox.</td></tr></table>";
setTimeout("FadeOutDiv()", 2000);
}
function FadeOutDiv() {
$(".quick-alert").fadeOut("slow", function() {
$(".quick-alert").remove();
});
}
we should have following in our css file :
.quick-alert
{
width:66%;
background:#EE5A1E; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#fff; font-weight:bold; text-align:center; border:1px solid #727272; padding:5px; margin:3px;margin-left:100px;
}
here you can set BG-color and font size according to your design.
Now finally on the click of the delete button we have to call this function from server-side :
protected void btnDelete_Click(object sender, ImageClickEventArgs e)
{
int i = DeleteFromInbox();
// after this we can return any variable knowing if the message is deleted or not
HtmlGenericControl MasterPageBodyTag = (HtmlGenericControl)this.Page.Master.FindControl("MainBody");
if (i>0)
{
MasterPageBodyTag.Attributes.Add("Onload", "javascript:DeleteFromInbox();");
}
else
{
MasterPageBodyTag.Attributes.Add("Onload", "javascript:ErrorInDeleteing();");
}
}
/******************************************************************/
Recently i have applied new message system like what we have seen in gmail and yahoo , when we delete the message,the message come for 4-5 second and after that it just fade out. First i was thinking it is going to be though.But after i implement it,i was not all that diffcult.So below is the solution .
/******************************************************************/
First we have to place a div in the master page and have to assign id to it.
<div id="msgdiv"></div>
Make the body of the master page runat="server" and have a id for it as well.
<body id="MainBody" runat="server">
we also have to add jquery file of 1.2.1min.js file :
<script src="js/jquery-1.2.1.min.js" type="text/JavaScript"></script>
Now lets say you want to show message on deleting of message from inbox.
So add the following two functions in JavaScript:
function DeleteFromInbox() {
document.getElementById("msgdiv").className = "quick-alert";
document.getElementById("msgdiv").innerHTML = "<table border='0' align='center' cellpadding='0' cellspacing='0'><tr><td><img src='images/checked_new_icon.jpg' alt='' /></td><td width='8'> </td><td>message deleted from inbox successfully.</td></tr></table>";
setTimeout("FadeOutDiv()", 2000);
}
function ErrorInDeleteing() {
document.getElementById("msgdiv").className = "quick-alert";
document.getElementById("msgdiv").innerHTML = "<table border='0' align='center' cellpadding='0' cellspacing='0'><tr><td><img src='images/checked_new_icon.jpg' alt='' /></td><td width='8'> </td><td>message was not deleted from inbox.</td></tr></table>";
setTimeout("FadeOutDiv()", 2000);
}
function FadeOutDiv() {
$(".quick-alert").fadeOut("slow", function() {
$(".quick-alert").remove();
});
}
we should have following in our css file :
.quick-alert
{
width:66%;
background:#EE5A1E; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#fff; font-weight:bold; text-align:center; border:1px solid #727272; padding:5px; margin:3px;margin-left:100px;
}
here you can set BG-color and font size according to your design.
Now finally on the click of the delete button we have to call this function from server-side :
protected void btnDelete_Click(object sender, ImageClickEventArgs e)
{
int i = DeleteFromInbox();
// after this we can return any variable knowing if the message is deleted or not
HtmlGenericControl MasterPageBodyTag = (HtmlGenericControl)this.Page.Master.FindControl("MainBody");
if (i>0)
{
MasterPageBodyTag.Attributes.Add("Onload", "javascript:DeleteFromInbox();");
}
else
{
MasterPageBodyTag.Attributes.Add("Onload", "javascript:ErrorInDeleteing();");
}
}
/******************************************************************/
Monday, June 1, 2009
PNG images problem for ie6
Hi,
Today i have a problem regarding the png images dot displaying properly in IE6 browser.
Then i find some of the best solution regarding this they are listed below :
1. IF YOU ARE USING PNG IMAGE AS SOURCE IMAGE :
if you are using png image like the following :
< img src=".png" / >
then all you have to do is to place the following code in your head section of the page :
2. IF YOU ARE USING PNG IMAGE IN Css as Background image :
if you are setting the png images in your css file as background image then the follwoing is the solution :
.tab {
background-image:url(images/tab_b.png);
background-repeat:repeat-x;
background-position:0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
then you can use the following in bold to hack the png for ie6 and you done
.tab {
background-image:url(images/tab_b.png);
background-repeat:repeat-x;
background-position:0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
_background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/tab_b.png, sizingMethod='scale');
}
3. If There are png images in both your css and page then you can use the follwing script
to correct ong effect :
var bgsleight = function() {
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
fnFixPng(obj);
obj.attachEvent("onpropertychange", fnPropertyChanged);
}
}
}
function fnPropertyChanged() {
if (window.event.propertyName == "style.backgroundImage") {
var el = window.event.srcElement;
if (!el.currentStyle.backgroundImage.match(/transparent\.gif/i)) {
var bg = el.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
el.filters.item(0).src = src;
el.style.backgroundImage = "url(blank.gif)";
}
}
}
function fnFixPng(obj) {
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
var sizingMethod = (obj.currentStyle.backgroundRepeat == "no-repeat") ? "crop" : "scale";
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
obj.style.backgroundImage = "url(blank.gif)";
}
return {
init: function() {
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
addLoadEvent(fnLoadPngs);
}
}
}
}();
bgsleight.init();
place the above code in js file and set the path of the file in your page.Also place a blank.gif file in the same directory where the .js file is.
You can get image below :
Today i have a problem regarding the png images dot displaying properly in IE6 browser.
Then i find some of the best solution regarding this they are listed below :
1. IF YOU ARE USING PNG IMAGE AS SOURCE IMAGE :
if you are using png image like the following :
< img src=".png" / >
then all you have to do is to place the following code in your head section of the page :
2. IF YOU ARE USING PNG IMAGE IN Css as Background image :
if you are setting the png images in your css file as background image then the follwoing is the solution :
.tab {
background-image:url(images/tab_b.png);
background-repeat:repeat-x;
background-position:0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
then you can use the following in bold to hack the png for ie6 and you done
.tab {
background-image:url(images/tab_b.png);
background-repeat:repeat-x;
background-position:0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
_background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/tab_b.png, sizingMethod='scale');
}
3. If There are png images in both your css and page then you can use the follwing script
to correct ong effect :
var bgsleight = function() {
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
fnFixPng(obj);
obj.attachEvent("onpropertychange", fnPropertyChanged);
}
}
}
function fnPropertyChanged() {
if (window.event.propertyName == "style.backgroundImage") {
var el = window.event.srcElement;
if (!el.currentStyle.backgroundImage.match(/transparent\.gif/i)) {
var bg = el.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
el.filters.item(0).src = src;
el.style.backgroundImage = "url(blank.gif)";
}
}
}
function fnFixPng(obj) {
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
var sizingMethod = (obj.currentStyle.backgroundRepeat == "no-repeat") ? "crop" : "scale";
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
obj.style.backgroundImage = "url(blank.gif)";
}
return {
init: function() {
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
addLoadEvent(fnLoadPngs);
}
}
}
}();
bgsleight.init();
place the above code in js file and set the path of the file in your page.Also place a blank.gif file in the same directory where the .js file is.
You can get image below :
Saturday, May 2, 2009
Show Password in textbox in normal mode
Hi all,
If you want the user to change his passowrd then you has to show him his last password
that is in Normal mode.
Ex : if the password is "Testing" then if you show it directly in textbox where textbox mode is
Password will be shown as "******".
So now if you want to show it as "Testing".then below is solution for it:
Place the text box on the .aspx part
In the code behind call function on page_load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoginInfo();
txtpass.Attributes.Add("value", viewstate["pwd"].ToString());
}
}
void LoginInfo()
{
Try
SqlCommand cmd = new SqlCommand("select PassHint from tbllogin where UserID=@aid ", new SqlConnection(ConfigurationManager.ConnectionStrings["LocalSqlServer"].ConnectionString.ToString()));
cmd.CommandType = CommandType.Text;
cmd.Connection.Open();
using (SqlDataReader dr = cmd.ExecuteReader())
{
if (dr.HasRows)
{
viewstate["pwd"] = dr["UserPass"].ToString();
}
}
dr_.Close();
cmd.Connection.Close();
cmd.Dispose();
catch (Exception ex)
{
//Response.Write(ex.ToString());
}
}
And you are done.
If you want the user to change his passowrd then you has to show him his last password
that is in Normal mode.
Ex : if the password is "Testing" then if you show it directly in textbox where textbox mode is
Password will be shown as "******".
So now if you want to show it as "Testing".then below is solution for it:
Place the text box on the .aspx part
In the code behind call function on page_load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoginInfo();
txtpass.Attributes.Add("value", viewstate["pwd"].ToString());
}
}
void LoginInfo()
{
Try
SqlCommand cmd = new SqlCommand("select PassHint from tbllogin where UserID=@aid ", new SqlConnection(ConfigurationManager.ConnectionStrings["LocalSqlServer"].ConnectionString.ToString()));
cmd.CommandType = CommandType.Text;
cmd.Connection.Open();
using (SqlDataReader dr = cmd.ExecuteReader())
{
if (dr.HasRows)
{
viewstate["pwd"] = dr["UserPass"].ToString();
}
}
dr_.Close();
cmd.Connection.Close();
cmd.Dispose();
catch (Exception ex)
{
//Response.Write(ex.ToString());
}
}
And you are done.
Tuesday, April 28, 2009
Allow user to download files of different types
Hi All,
here is code for you if you want the users to download file from your web page (as image,.xsls,.xslt etc).
*************** Code from here *******************
Response.ContentType = "image/jpeg";
Response.AppendHeader("Content-Disposition", "attachment; filename=" + filename);
Response.TransmitFile(Server.MapPath("foldername" + filename));
Response.End();
*************** Till here *************************
Content-Type -- You can set the content-type according to your file......
as if it is jpeg then content-type will be "image/jpeg"
below is list of some of content-type :
MS Word file --- application/msword
straight binary --- application/octet-stream
xml,xslt files ---- application/xslt+xml
RTF document --- application/rtf
PDF document --- application/pdf
ZIP document --- application/zip
you can view more about these at the below link :
http://www.asptutorial.info/sscript/ContentType.html
here is code for you if you want the users to download file from your web page (as image,.xsls,.xslt etc).
*************** Code from here *******************
Response.ContentType = "image/jpeg";
Response.AppendHeader("Content-Disposition", "attachment; filename=" + filename);
Response.TransmitFile(Server.MapPath("foldername" + filename));
Response.End();
*************** Till here *************************
Content-Type -- You can set the content-type according to your file......
as if it is jpeg then content-type will be "image/jpeg"
below is list of some of content-type :
MS Word file --- application/msword
straight binary --- application/octet-stream
xml,xslt files ---- application/xslt+xml
RTF document --- application/rtf
PDF document --- application/pdf
ZIP document --- application/zip
you can view more about these at the below link :
http://www.asptutorial.info/sscript/ContentType.html
Thursday, April 23, 2009
Display images from database
Hi,
Now a days developer like to save images to database.
Now the problem how to get image back from database.
For the same purpose we can use HttpHandler which can get the image from database.
and can be applied easily :
Here is code for that
Now in the .aspx this what you need to do :
and you are done .
You can view the same here :
http://forums.asp.net/t/1394122.aspx?PageIndex=2
Now a days developer like to save images to database.
Now the problem how to get image back from database.
For the same purpose we can use HttpHandler which can get the image from database.
and can be applied easily :
Here is code for that
you has to create a new generic handler.say its name is ImageViewer.ashx
here you put the following code in ProcessRequest() of the httphandler
context.Request.QueryString["ImageID"].ToString() // id of the row of database
Stream stream = null;
context.Response.ContentType = "image/jpeg/gif";
context.Response.Cache.SetCacheability(HttpCacheability.Public);
context.Response.BufferOutput = false;
int buffersize = 1024 * 16;
byte[] buffer = new byte[buffersize];
//Run your query here and get the binary stream from database assign it the stream variable as below
stream = stream from database;
int count = stream.Read(buffer, 0, buffersize);
while (count > 0)
{
context.Response.OutputStream.Write(buffer, 0, count);
count = stream.Read(buffer, 0, buffersize);
}
Now in the .aspx this what you need to do :
and you are done .
You can view the same here :
http://forums.asp.net/t/1394122.aspx?PageIndex=2
RegularExpressionValidator for image upload
Hi all,
you can control for uploading of only images(.jpg,.gif) etc.
Using the RegularExpressionValidator you can validate it on client side .
Here is the code for this :
asp:regularexpressionvalidator runat="server" errormessage="Only picture files are allowed!" validationexpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+(.gif|.GIF|.jpg|.JPG|.jpeg|.JPEG)$" controltovalidate="fileUpload" display="None">
http://forums.asp.net/p/1411282/3093528.aspx#3093528
you can
Using the RegularExpressionValidator you can validate it on client side .
Here is the code for this :
asp:regularexpressionvalidator runat="server" errormessage="Only picture files are allowed!" validationexpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+(.gif|.GIF|.jpg|.JPG|.jpeg|.JPEG)$" controltovalidate="fileUpload" display="None">
Wednesday, April 22, 2009
Fake player of the IPl part-2
Hi all,
there is one blog which is getting every body crazy these days.
here you can get lots of detail and funny things about the IPL-2.
Have a look at the link below and have fun :
http://fakeiplplayer.blogspot.com
there is one blog which is getting every body crazy these days.
here you can get lots of detail and funny things about the IPL-2.
Have a look at the link below and have fun :
http://fakeiplplayer.blogspot.com
Thursday, February 5, 2009
First Blog
Welcome to my blog . from now onwards you can ask your asp.net, javascript , sql related queries directly here.
Subscribe to:
Posts (Atom)
