سلام بر همه همراهان سایت نت نیک

امروز می خوام طریقه تغییر اندازه (سایز) تصاویر در asp.net بدون افت کیفیت تصاویر رو آموزش بدم.

در اغلب سایت ها به دلیل کمبود فضا و همینطور بالا بردن سرعت لود صفحات ، بهتره که ما یک سری تصاویر رو بصورت کوچک (tumbnail) نمایش بدین و از قرار دادن تصاویر بزرگ خودداری کنیم.

خوب مسلما در این مواقع لازمه که از هر مطلب 2 تا عکس داشته باشیم ، یکی در اندازه کوچک (بند انگشتی یا tumbnail) و دیگری در اندازه ای بزرگرتر (سایزی که قراره در صفحه ای که کاربر باید شرح کامل یک مطلب رو بخونه باید نمایش داده بشه)

خلاصه اینکه نیاز داریم که تصاویر در یک یا چند سایز خاص داشته باشیم ....

خوب مسلما اینکه مدیر سایت بیاد و خودش هر تصویر رو تو چند سایز تهیه کنه و بروی سایت آپلود کنه که یه کار خنده داره و نشون میده که برنامه نویس و طراح سایتش از این برنامه نویسایی بوده که 300 تومن می گیرن ، 4 روزه سایت تحویلت میدن .... !!!

کار درست اینه که مدیر سایت در کنترل پنلش یک عکس برای هر خبر یا مطلب انتخاب کنه (FileUpload)  و بعد شما با کد نویسی بیاین عکس رو در چند سایز مختلفی که نباز هست ، تغییر اندازه بدین ( Resize کنین) و بر روی سرور ذخیره کنین.

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

حتما می پرسین چطوری میشه در asp.net تصاویر رو تغییر اندازه داد و بعد روی سرور ذخیره کرد ؟

در ادامه مطلب نحوه تغییر اندازه تصاویر رو بهتون آموزش میدم.

خوب ،مراحل کلی کارمون اینه :

  1. فایل تصویری که مدیر سایت از روی سیستمش انتخاب کرده رو می گیریم و توی یک متغیر از نوع Bitmap  می ریزیم
  2. بعد اندازه سایز تصویر دریافت شده رو با اندازه هایی که خودمون برای تصویرمون در نظر گرفته ایم ، مقایسه می کنیم و اندازه جدید تصویرمون رو بدست میاریم ، این بخش خیلی مهمه و باید حواستون باشه که Scale یا نسبت طول به عرض تصویر اصلی نباید به هم بریزه ، وگرنه عکس خروجیتون کج و معوج میشه و انگاری از یه طرف گرفتی و کشیدیش (کش میاد)
  3. کلاس Bitmap یک کلاس خیلی کامل برای کار با تصاویراست ، این کلاس یک سری توابع داره که به راحتی میشه طول و عرض جدید تصویر رو بهش بدیم و تصویر Resize شده در اندازه مورد نظر رو تحویل بگیریم.


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

منتهی از اونجایی که این تابع باید از کنترل FileUpload موجود در صفحه تصویر رو بگیره و تغییر سایزش بده و در مسیری که شما بهش میدین آپلود کنه ، باید حتما این تابع رو داخل کد های صفحه ای که می خواین تصویر بگیرین و تغییر سایزش بدین و ... قرارش بدین و بنابراین امکانش نیست که شما تایع رو بصورت کلاس در بیارین و یا اونو DLL کنین و ....

با توجه به توصیحات بالا ، کد ها کاملا روشن هستند و فکر نمی کنم نکته خاصی داشته باشن .

اول کتابخونه های مورد نیاز رو باید به صفحتون اضافه کنین :


بعد تابع زیر رو به صفحه ای که قراره تصویر دریافت کنه و .... اضافه کنین :





تنها نکته اینه که دقت کنین که شما باید مسیری که می خواین فایلتون توش ذخیره بشه رو بهش بدین : مثلا من گفتم توی روت و پوشه up  و پوشه گالری تصویر ریسایز شده رو آپلود کنه (ذخیره کنه)

وقتی دارین فایلاتونو روی هارد بصورت فیزیکی می ریزین (فایلا رو کد نمی کنین و روی دیتابیس نمی ریزین و اونارو بصورت فایل مستقیم روی هارد سرور آپلود می کنین) ، باید دقت داشته باشین که نام فایلاتون هیچ وقت نباید یکی بشه ، در غیر اینصورت فایل جدید روی فایل هم نامی که قبلا روی سرور ذخیره شده Replace میشه و مسلما شما فایل قبلی رو از دست خواهید داد...

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

نکته بعدی اینه که اگر قراره از تصویری که مدیر سایت (یا هر کسی) انتخاب می کنه ، بیش از یک عکس ، مثلا 2 تا عکس در سایز های مختلف روی هارد داشته باشین، باید در رویداد کلیک دکمه ثبت مطلبتون ، تابع من رو 2 بار فراخونی کنین .
پس دقت کنین که تابع من هر بار یک اجرا بشه ، یک عکس می گیره و اونو ریسایز می کنه و بعد اونو با نامی که بهش دادین روی سرور و در مسیری که توش ست کردین ذخیره می کنه.

پیشنهاد می کنم که مثلا بیاین یک عدد رندوم چند رقمی ایجاد کنین و بعد به آخرش .jpg اضافه و اونو به همراه سایز مورد نظرتون به تابع من بدین ، بعد همون عدد رندوم رو بیارین و مثلا به آخرش s.jpg_ اضافه کنین و دوباره با سایز جدید به تابع من بدین و ....

این تابع کاملا تست شده و عالی عمل می کنه و حاصل چندین روز کار بنده است (تست و تغییر کد ها و ...) تا شده اینی که یم بینین
اگر دقت کنین ، می بینین که نسبت طول به عرض یا Scale  یا Ratio تصویر رو هم حفظ می کنه

خلاصه اینکه من کد بد که نمیزنم
آموزش تغییر اندازه (سایز) تصاویر در asp.net - netnic.ir

امیدوارم که از این کد و آموزش استفاده کنین و حالشو ببرین و سایت نت نیک یا آموزش رو هم از یاد نبرین
در روزهای آتی چند تا آموزش بهتر تر و خفن تر تر روی سایت قرار خواهم داد.
پس اگر برنامه نویس هستین و دنبال یاد گرفتن کد ها و تکنیک های جدید برنامه نویسی بخصصوی asp.net هستین
بهتره مرتب به ما سر بزنین :)
یا توی RSS سایت مشترک بشین ، اینطوری بدون نیاز به وارد شدن به سایت ، خیلی راحت می تونین برین توی منوی Bookmark مرورگرتون و خیلی راحت لیست آخرین مطالب سایت بنده رو ببینین و روی هر کدوم که خواستین کلیک کنین و مستقیم برین و مطلب مورد نظرتونو بخونین

الته من خودم تازه چند ماهه که این RSS رو کشف کردم و عملا دارم ازش استفاده می کنم .... خلاصه چیز توپیه :)

سوالات خودتونو می تونین توی بخش نظرات بپرسین و جوابشو هم 5 تا 24 ساعت بعد همونجا بخونین.

یا حق



نوشته شده در تاریخ دوشنبه 29 آبان 1391    | توسط: ح.م    | طبقه بندی: آموزش ASP.NET،     | نظرات()