ashx 控件返回图像,jquery 在加载时获取大小或 .NET OnLoad 方法不起作用
我有一个 ASHX 处理程序在页面加载时返回图像。我需要根据图像的尺寸动态向图像添加一个类。我尝试使用以下方法执行此操作:
代码隐藏方法
cs
protected void Page_Load(object sender, EventArgs e)
{
int id = Convert.ToInt32(Request.QueryString["id"]);
image1.ImageUrl = "get_image.ashx?id=" + id;
}
public void classify_image_Load(object sender, EventArgs e)
{
if(image1.Width.Value > image1.Height.Value)
{
image1.CssClass = "landscape";
}
else
{
image1.CssClass = "portrait";
}
}
html
<asp:Image ID="image1" runat="server" OnLoad="classify_image_Load" />
这适用于初始加载,但是适用于任何回发(上传新的图像/旋转/裁剪)它无法正确应用该类。
jQuery 方法
js
$(window).load(function(){
$('#image1').load(function() {
if($(this).width() > $(this).height())
{
$(this).attr('class', 'landscape');
} else {
$(this).attr('class', 'portrait');
}
});
});
这个方法根本不起作用,图像没有分配给它的类。我不确定这是否是 ashx 控件的计时问题还是什么。
ASHX 代码
public class get_image : IHttpHandler
{
string file_path = ConfigurationManager.AppSettings["file_path"].ToString();
public void ProcessRequest(HttpContext context)
{
context.Response.Clear();
Image img;
if (!String.IsNullOrEmpty(context.Request.QueryString["id"]))
{
int id;
if (context.Request.QueryString["id"].IndexOf('?') > 0)
{
id = Int32.Parse(context.Request.QueryString["id"].Split('?')[0]);
}
else
{
id = Int32.Parse(context.Request.QueryString["id"]);
}
dbclassDataContext db = new dbclassDataContext();
photo d = (from p in db.photos
where p.id == id
select p).SingleOrDefault();
if (d != null)
{
if (!String.IsNullOrEmpty(d.filename))
{
img = Image.FromFile(file_path + "\\" + d.filename);
context.Response.ContentType = "image/" + d.filetype;
img.Save(context.Response.OutputStream, get_format(d.filetype));
}
else
{
img = Image.FromFile(file_path + "\\no_image.jpg");
context.Response.ContentType = "image/jpeg";
img.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
}
else
{
img = Image.FromFile(file_path + "\\no_image.jpg");
context.Response.ContentType = "image/jpeg";
img.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
}
else
{
img = Image.FromFile(file_path + "\\no_image.jpg");
context.Response.ContentType = "image/jpeg";
img.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
img.Dispose();
}
public bool IsReusable
{
get
{
return false;
}
}
private ImageFormat get_format(string ftype)
{
switch (ftype)
{
case "jpeg":
return ImageFormat.Jpeg;
case "png":
return ImageFormat.Png;
case "gif":
return ImageFormat.Gif;
default:
return ImageFormat.Jpeg;
}
}
}
我使用 Linq 根据用户 ID 从数据库中提取位置和类型,然后将图像返回到请求页面。这似乎工作正常,但我将其包括在内,以防万一我忽略了任何问题。
问题
我需要根据图像的尺寸对图像进行动态分类,我可以在 .NET 代码后面或使用 jQuery 来完成此操作。我上述方法做错了什么导致它无法正常工作?
I have an ASHX handler returning an image on page load. I need to add a class to the image dynamically depending on the dimensions of the image. I have tried doing this using the following methods:
Code Behind Method
cs
protected void Page_Load(object sender, EventArgs e)
{
int id = Convert.ToInt32(Request.QueryString["id"]);
image1.ImageUrl = "get_image.ashx?id=" + id;
}
public void classify_image_Load(object sender, EventArgs e)
{
if(image1.Width.Value > image1.Height.Value)
{
image1.CssClass = "landscape";
}
else
{
image1.CssClass = "portrait";
}
}
html
<asp:Image ID="image1" runat="server" OnLoad="classify_image_Load" />
This works on initial load, however on any postbacks (uploading a new image/rotating/cropping) it fails to apply the class correctly.
jQuery Method
js
$(window).load(function(){
$('#image1').load(function() {
if($(this).width() > $(this).height())
{
$(this).attr('class', 'landscape');
} else {
$(this).attr('class', 'portrait');
}
});
});
This method doesn't work at all, the image has no class assigned to it. I'm not sure if this is a timing issue with the ashx control or what.
ASHX Code
public class get_image : IHttpHandler
{
string file_path = ConfigurationManager.AppSettings["file_path"].ToString();
public void ProcessRequest(HttpContext context)
{
context.Response.Clear();
Image img;
if (!String.IsNullOrEmpty(context.Request.QueryString["id"]))
{
int id;
if (context.Request.QueryString["id"].IndexOf('?') > 0)
{
id = Int32.Parse(context.Request.QueryString["id"].Split('?')[0]);
}
else
{
id = Int32.Parse(context.Request.QueryString["id"]);
}
dbclassDataContext db = new dbclassDataContext();
photo d = (from p in db.photos
where p.id == id
select p).SingleOrDefault();
if (d != null)
{
if (!String.IsNullOrEmpty(d.filename))
{
img = Image.FromFile(file_path + "\\" + d.filename);
context.Response.ContentType = "image/" + d.filetype;
img.Save(context.Response.OutputStream, get_format(d.filetype));
}
else
{
img = Image.FromFile(file_path + "\\no_image.jpg");
context.Response.ContentType = "image/jpeg";
img.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
}
else
{
img = Image.FromFile(file_path + "\\no_image.jpg");
context.Response.ContentType = "image/jpeg";
img.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
}
else
{
img = Image.FromFile(file_path + "\\no_image.jpg");
context.Response.ContentType = "image/jpeg";
img.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
img.Dispose();
}
public bool IsReusable
{
get
{
return false;
}
}
private ImageFormat get_format(string ftype)
{
switch (ftype)
{
case "jpeg":
return ImageFormat.Jpeg;
case "png":
return ImageFormat.Png;
case "gif":
return ImageFormat.Gif;
default:
return ImageFormat.Jpeg;
}
}
}
I'm using Linq to pull the location and type from the database based on the users ID, I then return the image to the requesting page. This seems to be working fine but I included it in case there may be any issues I overlooked.
Question
I need to dynamically classify the Image based on its dimensions, I can do this either in .NET code behind or with jQuery. What am I doing wrong with the above methods that is causing it to not work correctly?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果从浏览器缓存加载图像,.load 事件可能会出现问题(请参阅 http://api.jquery .com/load-event/ ) - 也许您可以尝试禁用缓存或向图像附加一个时间值,这样浏览器就不会缓存它,以防遇到这个问题?
The .load event can have problems if the image is loaded from browser cache (see http://api.jquery.com/load-event/ ) - maybe you could try either disabling the caching or appending a time value to the image so the browser doesn't cache it, in case it's that issue that's hitting?