PDA

View Full Version : سوال: نمایش عکس های دینامیک


baroon2
دوشنبه 25 مرداد 1389, 12:13 عصر
سلام
من یکسری image دارم که از دیتابیس می خونمشون، می خوام که اینها رو از طریق jquery روی المنت img حالا روی خصوصیت src یا url (فرقی نمی کنه) نشون بدم .
این تیکه کد منه . ممنون می شم دوستان کمک کنند.


<script language="javascript" type="text/javascript">
var pageUrl = "Default.aspx";
$(document).ready(function()
{
loadData()
});

function loadData() {
$.ajax({
url: pageUrl,
data: "action=Load",
success: fillImage,
error: showError,
cache: false,
beforeSend: showLoading
});
}
function fillImage() {
$('#MapDiv').src="GetImage.aspx"
}
function showError(error) {

}
function showLoading() {
}
</script>



این هم صفحه ایی که image توش تولید می شه :



if (Session["Image"] != null)
{
System.Drawing.Image im = (System.Drawing.Image)Session["Image"];
Response.ContentType = "image/Png";
MemoryStream ms = new MemoryStream();
im.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
byte[] b = ms.ToArray();
Response.OutputStream.Write(b, 0, b.Length);
Response.End();
}
mehdi.mousavi
پنج شنبه 28 مرداد 1389, 14:21 عصر
سلام من یکسری image دارم که از دیتابیس می خونمشون، می خوام که اینها رو از طریق jquery روی المنت img حالا روی خصوصیت src یا url (فرقی نمی کنه) نشون بدم . این تیکه کد منه . ممنون می شم دوستان کمک کنند.

سلام.
کافیه تا src المنت Image مورد نظر رو مساوی اون آدرس اون صفحه ASPX اتون بذارید (البته با پارامترهایی که بهش میدید، تا سمت سرور بدونه کدوم تصویر رو باید Load و به Client برگردونه). برای اینکار هم، میتونید به این شکل عمل کنید:

با فرص به داشتن چنین Element ای در HTML اتون:

<img class="myImage" />

باید بنویسید:

$('img.myImage').attr('src', 'default.aspx?id=23&whateverParam=whateverValue');

به این ترتیب درخواست به دست ASPX شما میرسه و ... اگر مایل بودید تا از تکمیل Load شدن Image مربوطه نیز مطلع بشید، میتونید با attach کردن load به همون element تصویر که در بالا src اش رو set کردیم، به این هدف برسید.

موفق باشید.
baroon2
شنبه 30 مرداد 1389, 13:33 عصر
آقای موسوی ممنون از کمکی که کردید اما یه مشکلی هست و اون این که دفعه اول که صفحه لود می شه من می تونم image رو ببینم ، اما وقتی می خوام عکس بعدی رو load کنم ، اصلاً توی صفحه ایی که image رو تولید می کنم نمی ره (من همون تایع رو فراخوانی می کنم ). ممنون می شم یه بار دیگه جواب سوالم را بدین.
mehdi.mousavi
شنبه 30 مرداد 1389, 14:09 عصر
آقای موسوی ممنون از کمکی که کردید اما یه مشکلی هست و اون این که دفعه اول که صفحه لود می شه من می تونم image رو ببینم ، اما وقتی می خوام عکس بعدی رو load کنم ، اصلاً توی صفحه ایی که image رو تولید می کنم نمی ره (من همون تایع رو فراخوانی می کنم ). ممنون می شم یه بار دیگه جواب سوالم را بدین.

سلام.
آیا از کدی استفاده می کنید که در اولین پست این تاپیک اونو قرار داده اید؟ اگر اینطوره، اصلا نیازی به اجرای اون کد نیست. در حقیقت نیازی به آوردن داده های تصویر به اون شکل، به سمت client ندارید. اگر خیر، لطفا کد جدیدتون رو اینجا قرار بدید تا ببینم مشکلش چیه.

موفق باشید.
baroon2
شنبه 30 مرداد 1389, 14:58 عصر
public abstract class CodePage:Page
{
protected override void OnLoad(EventArgs e)
{
if (Request["action"] != null)
{
Response.Clear();
switch (Request["action"].ToLower())
{
case "load":
LoadMap();
break;
case "zoomin":
ZoomIn();
break;
case "zoomout":
ZoomOut();
break;
}
Response.End();
}
}
public abstract void LoadMap();
public abstract void ZoomIn();
public abstract void ZoomOut();
}





public partial class _Default : CodePage
{
protected void Page_Load(object sender, EventArgs e)
{
}
public override void LoadMap()
{
Map.Width = 1024;
Map.Height = 768;
Map.LoadMap();
Session["Image"] = Map.MapImage;
}
public override void ZoomIn()
{
Map.ZoomLevel++;
Map.LoadMap();
Session["Image"] = Map.MapImage;
}
public override void ZoomOut()
{
Map.ZoomLevel--;
Map.LoadMap();
Session["Image"] = Map.MapImage;
}
}




<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="Script/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script src="Script/jquery.loading.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var pageUrl = "Default.aspx";
$(document).ready(function() {
loadData()
});
function loadData() {
$.ajax({
url: pageUrl,
data: "action=load",
success: fillImage,
error: showError,
cache: false,
beforeSend: showLoading
});
}

function ZoomIn() {
$.ajax({
url: pageUrl,
data: "action=ZoomIn",
success: fillImage,
error: showError,
cache: false,
beforeSend: showLoading
});
}

function ZoomOut() {
$.ajax({
url: pageUrl,
data: "action=Zoomout",
success: fillImage,
error: showError,
cache: false,
beforeSend: showLoading
});
}

function fillImage() {
$('img.myImage').attr('src', 'Image.aspx');
}
function showError(error) {

}
function showLoading() {
}
</script>
</head>
<body>
<div>
<input id="Button1" size="" type="button" value=" + " style="width: 20" onclick="ZoomIn()" />
<input id="Button2" type="button" value=" - " style="width: 20" onclick="ZoomOut()" /><br />
<br />
</div>
<img class="myImage" />
<br />

</div>
</body>
</html>


ممنون
baroon2
شنبه 30 مرداد 1389, 15:00 عصر
این همه صفحه image.aspx


protected void Page_Load(object sender, EventArgs e)
{
if (Session["Image"] != null)
{
Response.Clear();
Response.ClearContent();
System.Drawing.Image im = (System.Drawing.Image)Session["Image"];
Response.ContentType = "image/Png";
MemoryStream ms = new MemoryStream();
im.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
im.Save("c:\\1\\session.png");
byte[] b = ms.ToArray();
Response.OutputStream.Write(b, 0, b.Length);
Response.End();
}
}
mehdi.mousavi
شنبه 30 مرداد 1389, 23:02 عصر
سلام.
من کد شما رو دیدم... ببینید. اولا نگهداری اون Image توی Session کار چندان جالبی نیستش. بهتره از Cache استفاده کنید تا بین همه کاربرهای سایت Share بشه و در نتیجه نیازی به لود یک تصویر واحد برای N تا کاربر متفاوت نباشه. ضمن اینکه Cache بر اساس شرایط سرور میتونه بطور خودکار توسط ASP.NET Runtime خالی (Purge) بشه و ... در هر حال، من کد Image.aspx شما رو اینطوری نوشتم:


public partial class Image : System.Web.UI.Page
{
private int? Id
{
get
{
int id;
if (!int.TryParse(Request.QueryString["id"], out id))
return null;

return id;
}
}

protected override void OnLoad(EventArgs e)
{
int? id = Id;
if (id != null)
{
Response.Clear();
Response.ClearContent();
Response.ContentType = "image/png";

using (Bitmap bmp = new Bitmap(string.Format("d:\\temp{0}.png", id)))
{
Response.ContentType = "image/png";
bmp.Save(Response.OutputStream, ImageFormat.Png);
}
}

base.OnLoad(e);
}
}

سپس، توی یک ASPX دیگه، این کد رو نوشتم:


<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('img.myImage1').attr('src', 'image.aspx?id=1');
$('img.myImage2').attr('src', 'image.aspx?id=2');
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<img class="myImage1" />
<img class="myImage2" />
</asp:Content>


با اینکار، وقتی صفحه Load بشه، myImage1 تصویر شماره 1 و myImage2 تصویر شماره 2 رو بدرستی Load میکنه. دقت کنید که Source به image.aspx رو با ارسال یک پارامتر به image.aspx تعیین میکنم. وقتی گفتم یک، سمت سرور فایل d:\temp1.png رو Load میکنم، و هنگامیکه 2 بهش ارسال میشه، d:\temp2.png رو Load میکنم...

حالا برای Zoom کردن، شما یه پارامتر دیگه میفرستید به اسم فرضا action=zoomIn و اونور سمت سرور، اگر action شما zoomIn بود، تصویر Zoom شده رو به Client ارسال می کنید. کدی که شما نوشتید همواره Image.aspx رو درخواست میکنه...

موفق باشید.
baroon2
یک شنبه 31 مرداد 1389, 13:23 عصر
با اینکار، وقتی صفحه Load بشه، myImage1 تصویر شماره 1 و myImage2 تصویر شماره 2 رو بدرستی Load میکنه. دقت کنید که Source به image.aspx رو با ارسال یک پارامتر به image.aspx تعیین میکنم.
بازم ممنون از کمکی که کردین ، فقط یه سوال . حالتی وجود نداره که من پارامتری به صفحه image.aspx نفرستم. مثلاً یه عکس رو توی cache نگه دارم و اون رو تو image.aspx بخونم ؟
ممنون
mehdi.mousavi
یک شنبه 31 مرداد 1389, 14:49 عصر
بازم ممنون از کمکی که کردین ، فقط یه سوال . حالتی وجود نداره که من پارامتری به صفحه image.aspx نفرستم. مثلاً یه عکس رو توی cache نگه دارم و اون رو تو image.aspx بخونم ؟
ممنون

سلام.
خواهش میکنم، قابلی نداشت. در مورد سوال اخیرتون هم مساله رو به گونه ای دیگه ببینید. فرض کنید شما همواره توی درخواستتون ID ی یک Resource رو تعیین می کنید. سمت سرور، ابتدا بر اساس اون ID به Cache رجوع می کنید. اگر Image مورد نظر در Cache وجود داشت، از Cache استفاده می کنید و داده مورد نظر رو روی OutputStream می ریزید. اگر وجود نداشت، ابتدا تصویر رو Load می کنید، اونو در Cache قرار میدید، و سپس در OutputStream به Client ارسال می کنید. به این ترتیب، اگر در درخواست بعدی، اون ID قبلا Load شده باشه، دیگه سمت سرور اون Image رو Load نخواهید کرد و از Cache اونو Serve می کنید.

موفق باشید.