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 :
Subscribe to:
Posts (Atom)
