ساخت thumbnail(تصویر کوچک) از تصاویر در زمان اجرا بدون نیاز به ذخیره

[ایمان مدائنی]

با سلام خدمت دوستان عزیز

بیشتر برنامه نویسان در جهت پیشبرد اهداف خود نیاز به نمایش تصاویر در سایت های خود دارند

و مجبور به ذخیره عکس در دوحالت : اندازه واقعی و اندازه کوچک آن (thumb یا همان تصاویر بند انگشتی) هستند

برای مثال فروشگاه ها یا گالری تصاویر

که باید تصاویر در حالت کوچک نمایش داده شوند و در صورت کلیک کاربر روی عکس اندازه واقعی آن نمایش داده شود

حالا مسئله اینه که باید حافظه زیادی صرف ذخیره عکس در دوحالت مصرف شود
و مسئله بعدی ذخیره عکس به دو صورت است که پس از دریافت عکس می بایست این عکس اول به اندازه واقعی ذخیره میشد و سپس با استفاده از متد ها یا کلاس های خاصی که از فضای نام system.drawing استفاده میکردند به اندازه کوچک تبدیل و دوباره ذخیره میشد

با استفاده از این روش بالا زمان زیادی سرور صرف پردازش اطلاعات میکرد

حالا من میخوام بهتون روشی یاد بدم که نیازی به ذخیره عکس به اندازه کوچک نباشد و تصویر کوچک در زمان اجرا ساخته شده و پس بسته شدن مرورگر تسوط کاربر از بین میرود

در این روش از generic handler یا همان .ashx استفاده میکنیم

ashx چیست ؟
ashx ها هندلرهایی برای پردازش درخواست ها و در صورت نیاز برگشت نتیجه هستند.
یک فایل Ashx یا یک Generic Http Handler یک صفحه است که واسط IHttpHandler را Implement کرده است

این فایل قادر است درخواست هایی (Request) که به صورت Http به این صفحه ارسال می شود را کنترل کرده و پاسخ (Response) دهد

مثلا برای کوچک نمایی تصاویر ، ساخت تصاویر امنیتی ، پاسخ های XHR و... کاربرد دارد .

نحوه تولید تصاویر امنیتی تفاوتی نمی کند تنها نکته ای که باید بدانید این است که تصویر در نهایت به صورت Stream پاسخ داده می شود

در این پروژه استفاده خواهیم کرد

من یک نمونه براتون ضمیمه کردم که با مشاهده آن خیلی راحت ساخت تصاویر thumb در زمان اجرا را یاد خواهید گرفت

در این نمونه اندازه تصویر thumb توسط شما تعیین میگردد چ

imgThumb.ImageUrl = string.Format("~/Image/aish.jpg.ashx?w={0}&h={1}", txtWidth.Text.Trim(),
txtHeight.Text.Trim());


که از دو textbox در صفحه مقدار دهی میشوند

و کلاسی گه در پروزه دوم solution به نام Xpertz.Base قرار دارد از IHttpHandler ارث بری کرده است

public class Images : IHttpHandler


فقط دقت کنید در web.config باید مقداری تغییر ایجاد کنید


<httphandlers>
<add verb="*" path="*.jpg.ashx" type="Xpertz.Base.Handler.Images"></add>
<add verb="*" path="*.jpeg.ashx" type="Xpertz.Base.Handler.Images"></add>
<add verb="*" path="*.png.ashx" type="Xpertz.Base.Handler.Images"></add>
<add verb="*" path="*.gif.ashx" type="Xpertz.Base.Handler.Images"></add>
<add verb="*" path="*.bmp.ashx" type="Xpertz.Base.Handler.Images"></add>
</httphandlers>




نمونه برنامه ضمیمه می باشد


موفق و پیروز باشید

[ایمان مدائنی]

برای استفاده از این مثال در پروژه های خود فقط کافیه که کلاس Images.cs را به پروژه خود اضافه کرده سپس تغییرات را در WebConfig اعمال کنید

[ali_mnkt]

این روش به نظرم یک مشگل داره و اون هم این که مثلا فرض کنید یک صفحه فروشگاه هست که تعداد زیادی محصول توشه خوب اگر به ازای هر request که برای اون صفحه می یاد این کد برای کوچک کردن تصاویر اجرا بشه که بار سرور رو خیلی می بره بالا !!!!!

[اوبالیت به بو]

این روش به نظرم یک مشگل داره و اون هم این که مثلا فرض کنید یک صفحه فروشگاه هست که تعداد زیادی محصول توشه خوب اگر به ازای هر request که برای اون صفحه می یاد این کد برای کوچک کردن تصاویر اجرا بشه که بار سرور رو خیلی می بره بالا !!!!!

به نظر من مساله نداره. هرچی سرور دستورات پردازشی بیشتر داشته باشه خیلی بهتر از اینه که سرور دستور مراجعه به حافظه داشته باشه. اگر قرار باشه مدام به حافظه کندی به نام رم یا دیسک مراجعه کنه بسیار سرعت سایت پایین میاد. CPU کلاک خیلی بالایی داره و به راحتی می تونه پردازش رو انجام بده.

[moferferi]

سلام.من هم قبلا از این روش استفاده کردم.اما بیشتر بدرد مواقعی میخوره که تعداد عکس ها و بازدید های سایت کم باشه و وقت برنامه نویسی بیشتر نداشته باشیم
اگه با فروشگاه سازهای معروف و حرفه ای مثل اپن کارت،پرستا،تومیتو و ..کار کرد باشین میبنید که وقتی یه عکس واسه محصولتون اپلود میکنید ،هم زمان از همون عکس اصلی چند تا عکس با سایزهای مختلف برای استفاده در بخش های مختلف ایجاد میکنه.
اگه روشی که شما گفتین روش بهینه و اصولی بود توی این سیستم ها حتما ازش استفاده میشد.
البته باز هم این را بگم که من خودم در حال حاضر از همین روش در یک پرتال استفاده میکنم .ولی تعداد عکسها و بازدید از پرتال بسیار کمه

[hamid_kha]

با سلام خدمت آقای مدائنی

بنده از کلاس شما در پروژه ام استفاده کردم با این توضیح که میخوام عکس هایی که توی اسلایدر هست رو به کلاسی که شما نوشتید نسبت بدم
چیزی که به ذهنم رسید و استفاده کردم و جواب نداد این بود:

<asp:ListView ID="lstSlide" runat="server" DataSourceID="dsSlide">
<ItemTemplate>
<li class="jqslider" style="font-family: Tahoma, Arial, sans-serif; font-size: 10px">
<div class="home-banner-main" dir="rtl" style="text-align: justify">
<h2>
<%# Eval("SlideTitle") %></h2>
<p>
<%# Eval("SlideText") %>
</p>
</div>
<!-- end home-banner-main -->
<div class="home-banner-sub">
<div class="home-banner-sub-content">
<asp:Image ID="Image2" runat="server" ImageUrl='<%# GetThumbFilename(Eval("ImageUrl").ToString()) %>'
Width="190" Height="111" />

</div>
<!-- end home-banner-sub-content -->
</div>
<!-- end home-banner-sub -->
</li>
</ItemTemplate>
</asp:ListView>

و یه تابع نوشتم که Url رو تغییر بده:


protected string GetThumbFilename(string OriginalFilename)
{
string thumbfilename = OriginalFilename + ".ashx?w={190}&h={111}";

return thumbfilename;
}

هدفم این است که میخوام عکسهای اسلایدر با اون سایری که تعیین کردم جواب بده.
میشه یه راهنمایی کنید - باتشکر:چشمک:

[alibabaei2]

من از این تابع استفاده کردم اما وقتی سایت رو آپلود میکنم عکس ها رو نشون نمیده با اینکه در web.config در system.webserver هندلر ها رو add کردم اما باز هم جواب نمیده