מדריך CSHTML – עבודה עם תמונות

ליאור זמיר ‏ • John Bryce

פרק זה מראה לך כיצד להוסיף ולהציג תמונות עבור אתר האינטרנט שלך וכיצד לבצע בהם שינויים לפני שאתה שומר אותם – איך לשנות את גודלם, להפוך אותם ולהוסיף סימני מים.

מה נלמד:

כיצד להוסיף תמונה לדף באופן דינמי.
כיצד לאפשר למשתמשים להעלות תמונות.
כיצד להתאים את גודל התמונה.
כיצד להפוך או לסובב תמונה.
כיצד להוסיף סימן מים לתמונה.
כיצד להשתמש בתמונה כסימן מים.

אלו הן תכונות CSHTML שנציג:

האוביקט WebImage
האוביקט Path, אשר מספק פונקציות שמאפשרות לך לשנות את נתיב הקובץ ושמו.

הוספת תמונה לדף אינטרנט באופן דינאמי

ניתן להוסיף תמונות לאתר שלך ולדפים בודדים בזמן פיתוח האתר. אתה יכול גם לאפשר למשתמשים להעלות תמונות, זה עשוי להיות שימושי עבור משימות כמו לאפשר למשתמשים להוסיף תמונה בפרופיל.

אם התמונה כבר קיימת באתר שלך, ואתה רק רוצה להציג אותה בדף, אתה יכול להשתמש בתגית <img> של שפת HTML:

<img src="images/Photo1.jpg" alt="Sample Photo" />

עם זאת, לפעמים, אתה צריך להיות מסוגל להציג תמונות באופן דינמי – כלומר, אתה לא יודע מה התמונה לתצוגה עד שהדף כבר רץ.

ההליך הבא מראה כיצד להציג תמונה בזמן אמת על-פי בחירת המשתמש מתוך רשימה של שמות לבחירה.

הוספת תמונה לדף אינטרנט באופן דינאמי

ב- WebMatrix, צור אתר אינטרנט חדש.
הוסף דף חדש בשם DynamicImage.cshtml.
בתיקיית השורש של האתר, הוסיף תיקייה חדשה בשם images.
הוסף שלוש תמונות כלשהן לתיקיית images שזה עתה יצרת. שנה את שמות התמונות ל-Photo1.jpg, Photo2.jpg, Photo3.jpg .
ודא כי שלוש התמונות לא מסומנים לקריאה בלבד.
החלף את הקוד הקיים בדף בקוד הבא:
```
@{  var imagePath = "";
    if (Request["photoChoice"] != null)
    {
      imagePath = @"images\" + Request["photoChoice"];
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Display Image on the Fly</title>
</head>
<body>
  <h1>
    Displaying an Image On the Fly</h1>
  <form method="post" action="">
  <div>
    I want to see:
    <select name="photoChoice">
      <option value="Photo1.jpg">Photo 1</option>
      <option value="Photo2.jpg">Photo 2</option>
      <option value="Photo3.jpg">Photo 3</option>
    </select>
    &nbsp;
    <input type="submit" value="Submit" />
  </div>
  <div style="padding: 10px;">
    @if (imagePath != "")
    {
      <img src="@imagePath" alt="Sample Image" width="300px" />
    }
  </div>
  </form>
</body>
</html>
```
ב- body של הדף יש תיבת רשימה נגללת (תגית <select>) בשם photoChoice. ברשימה יש שלוש אפשרויות, ולתכונה value של כל אחת מהאפשרויות ברשימה יש את השם של אחת התמונות בתיקיית התמונות. הרשימה מאפשרת למשתמש לבחור מתוך שמות ידידותיים כמו "Photo 1", ולאחר מכן בעת ביצוע submit עובר שם הקובץ האמיתי.
בקוד, אתה יכול לקבל את בחירת המשתמש מהרשימה ידי קריאה של [“Request["photoChoice. אתה קודם כל רואה אם יש בחירה בכלל. אם יש, צריך לבנות נתיב עבור התמונה המורכב משם התיקייה ושם התמונה הנבחרת. התוצאה, במידה והתמונה הראשונה נבחרה, היא הנתיב היחסי הבא:
images/Photo1.jpg
הנתיב מאוחסן במשתנה בשם imagePath אותו נצטרך בהמשך הדף.
ב- body יש גם תגית <img> שנועדה להציג את התמונה שהמשתמש בחר. התכונה src לא מוגדרת לשם של תמונה או כתובת מסויימת, כמו שהיית עושה כדי להציג אלמנט סטטי. במקום, היא מוגדרת ב- imagePath@, כלומר היא מקבלת את הערך שלה מן הנתיב שהגדרת בקוד.
בפעם הראשונה שהדף פועל אין תמונה להציג, משום שהמשתמש עדיין לא בחר. זה בדרך כלל אומר שהתכונה src תהיה ריקה והתמונה לא תופיע אלא יופיע "x" אדום (או מה שהדפדפן מציג כאשר הוא לא מצליח למצוא תמונה). כדי למנוע זאת, שמנו את התגית <img> בבלוק של if הבודק האם המשתנה imagePath מכיל משהו. אם המשתמש עשה בחירה, imagePath מכיל את הנתיב. אם המשתמש לא בחר תמונה או אם זו הפעם הראשונה שהדף מוצג, התגית <img> לא מוצגת כלל.
שמור את הקובץ והרץ את הדף בדפדפן (ודא שהדף נבחר מחלון Files לפני שתפעיל אותו).

העלאת תמונה

הדוגמה הקודמת הראתה לך איך להציג תמונה דינמית, אבל זה עבד רק עם תמונות שכבר היו באתר האינטרנט שלך. הליך זה מדגים כיצד לאפשר למשתמשים להעלות תמונה, אשר תוצג לאחר מכן בדף. בשפת CSHTML, אתה יכול לבצע פעולות על תמונות בזמן אמת באמצעות הפונקציות של WebImage, אשר מאפשרות לך ליצור, לשנות, ולשמור תמונות.

WebImage תומך בכל סוגי התמונות הנפוצים באינטרנט, כולל png, jpg, bmp וכו'.

העלאת תמונה

הוסף דף חדש לאתר בשם UploadImage.cshtml.
החלף את הקוד הקיים בדף בקוד הבא:
```
@{  WebImage photo = null;
    var newFileName = "";
    var imagePath = "";
 
    if (IsPost)
    {
      photo = WebImage.GetImageFromRequest();
      if (photo != null)
      {
        newFileName = Guid.NewGuid().ToString() + "_" +
            Path.GetFileName(photo.FileName);
        imagePath = @"images\" + newFileName;
 
        photo.Save(@"~\" + imagePath);
      }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Upload</title>
</head>
<body>
  <form action="" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>Upload Image </legend>
    <label for="Image">
      Image</label>
    <input type="file" name="Image" />
    <br />
    <input type="submit" value="Upload" />
  </fieldset>
  </form>
  <h1>
    Uploaded Image</h1>
  @if (imagePath != "")
  {
    <div class="result">
      <img src="@imagePath" alt="image" />
    </div>
  }
</body>
</html>
```
בגוף הטקסט ישנה תגית input type=file , אשר מאפשרת למשתמשים לבחור קובץ להעלאה. כאשר הם לוחצים על Submit , הקובץ שהם בחרו עולה לשרת. כדי לקבל את התמונה שנטענה, תשתמש באוביקט WebImage, שבו יש את כל הפונקציות השימושיות לעבודה עם תמונות. באופן ספציפי, אתה משתמש בפונקציה WebImage.GetImageFromRequest כדי לקבל את התמונה שנטענה (אם בכלל) ולאחסן אותה במשתנה בשם photo .
הרבה עבודה בדוגמה זו כרוכה בלקבל ולהגדיר שמות לקבצים ונתיבים. הבעיה היא שאתה רוצה לקבל את השם (ורק שם) של התמונה שהמשתמש טען, ולאחר מכן ליצור נתיב חדש לאן שאתה הולך לאחסן את התמונה. מכיוון שמשתמשים שעלולים להעלות תמונות מרובות עם אותו השם, אתה משתמש בקוד נוסף כדי ליצור שמות ייחודיים ולוודא שהמשתמשים לא דרסו תמונות קיימות.
אם התמונה אכן הועלתה (הבדיקה ( if(photo != null ), אתה מקבל את שם התמונה מהמאפיין FileName של התמונה. כאשר המשתמש טוען את התמונה, FileName מכיל את השם המקורי של המשתמש, אשר כולל את הנתיב של המשתמש במחשב זה. זה עשוי להיראות כך:
C:\Users\Joe\Pictures\SamplePhoto1.jpg
אתה לא רוצה את כל מידע הנתיב, אלא רק את שם הקובץ בפועל (SamplePhoto1.jpg). אתה יכול לשלוף רק את שם הקובץ מהנתיב באמצעות הפונקציה Path.GetFileName , כך:
```
Path.GetFileName(photo.FileName);
```
לאחר מכן אתה יוצר שם חדש וייחודי על-ידי הוספת GUID (מזהה ייחודי אוטומטי) לשם המקורי. ואז בונה מסלול שלם שאתה יכול להשתמש כדי לשמור את התמונה. הנתיב לשמירה מורכב משם הקובץ החדש, התיקייה (images), ומיקום האתר הנוכחי.
לבסוף, אתה מעביר את נתיב השמירה לפונקציה Save של WebImage המאחסנת את התמונה שנטענה תחת שמה החדש. הפונקציה לשמירה נראית כך:
```
photo.Save(@"~\" + imagePath);
```
הנתיב השלם צורף ל- @"~\" המהווה את מיקום האתר הנוכחי. כמו בדוגמא הקודמת, גוף הדף מכיל את תגית <img> כדי להציג את התמונה. אם imagePath נשלח, התגית <img> מוצגת והתכונה src שלה מוגדרת לערך imagePath.
הפעל את הדף בדפדפן.

שינוי גודל תמונה

אם האתר שלך מקבל תמונות מן המשתמש, ייתכן שתרצה לשנות את גודל התמונות לפני שאתה מציג או שומר אותן. WebImage יכול לסייע בכך.

הליך זה מראה כיצד להתאים את גודל התמונה שהועלתה כדי ליצור תמונה ממוזערת ולאחר מכן לשמור את התמונה הממוזערת ואת התמונה המקורית באתר. אתה מציג את התמונה הממוזערת בדף ומשתמש בקישור כדי להפנות את משתמשים לתמונה בגודל המלא.

שינוי גודל תמונה

הוסף דף חדש בשם Thumbnail.cshtml.
בתיקיית images, צור תיקיית משנה בשם thumbs.

החלף את הקוד הקיים בדף בקוד הבא:

@{  WebImage photo = null;
    var newFileName = "";
    var imagePath = "";
    var imageThumbPath = "";
 
    if (IsPost)
    {
      photo = WebImage.GetImageFromRequest();
      if (photo != null)
      {
        newFileName = Guid.NewGuid().ToString() + "_" +
            Path.GetFileName(photo.FileName);
        imagePath = @"images\" + newFileName;
        photo.Save(@"~\" + imagePath);
 
        imageThumbPath = @"images\thumbs\" + newFileName;
        photo.Resize(width: 60, height: 60,
                     preserveAspectRatio: true, 
                     preventEnlarge: true);
        photo.Save(@"~\" + imageThumbPath);
      }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Resizing Image</title>
</head>
<body>
  <h1>
    Thumbnail Image</h1>
  <form action="" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>Creating Thumbnail Image </legend>
    <label for="Image">
      Image</label>
    <input type="file" name="Image" />
    <br />
    <input type="submit" value="Submit" />
  </fieldset>
  </form>
  @if (imagePath != "")
  {
    <div class="result">
      <img src="@imageThumbPath" alt="Thumbnail image" />
      <a href="@Html.AttributeEncode(imagePath)" target="_Self">
      View full size </a>
    </div>     
  }
</body>
</html>

קוד זה דומה לקוד מהדוגמה הקודמת. ההבדל הוא, שהקוד הזה שומר את התמונה פעמיים, פעם אחת כתמונה רגילה ופעם נוספת כעותק ממוזער של התמונה. ראשית אתה מקבל את התמונה לטעינה ושומר אותה בתיקית images. לאחר מכן, אתה בונה נתיב עבור התמונה הממוזערת. כדי ליצור למעשה את התמונה הממוזערת, אתה קורא לפונקציה Resize של WebImage כדי ליצור תמונה ברוחב וגובה של 60 פיקסלים. הדוגמה מראה איך אתה לשמר את הפרופורציה של התמונה (היחס בין הגובה לרוחב). התמונה הממוזערת נשמרת בתוך תיקיית המשנה thumbs.

תגית ה- <img> מציגה את התמונה לאחר שינוי הגודל. תגית <a> יוצרת קישור לתמונה המקורית שהועלתה (לפני המיזעור). תכונת ה- href של התגית <a> משתמשת בפונקציה Html.AttributeEncode כדי לוודא שהנתיב יכול לעבוד כמו כתובת URL, הפונקציה ממירה תווים שמורים בנתיב לתווים המותרים בכתובת URL חוקית.

הפעל את הדף בדפדפן.

סיבוב והיפוך התמונה

WebImage גם מאפשר לך להפוך ולסובב תמונות. הליך זה מדגים כיצד לקבל תמונה מהשרת, להפוך את התמונה אנכית, לשמור אותה, ולאחר מכן להציג את התמונה ההפוכה בדף. בדוגמה זו, אתה פשוט משתמש בקובץ שיש לך כבר בשרת (Photo1.jpg). ביישום אמיתי, אתה בטח תסובב תמונה שאת שמה אתה מקבל באופן דינמי, כמו שעשית בדוגמאות קודמות.

סיבוב והיפוך התמונה

הוסף דף חדש בשם Flip.cshtml.

החלף את הקוד הקיים בדף בקוד הבא:

@{  var imagePath = "";
    WebImage photo = new WebImage(@"~\Images\Photo1.jpg");
    if (photo != null)
    {
      imagePath = @"images\Photo1.jpg";
      photo.FlipVertical();
      photo.Save(@"~\" + imagePath);
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Get Image From File</title>
  <meta http-equiv="content-type" 
    content="text/html;charset=utf-8" />
</head>
<body>
  <h1>
    Flip Image Vertically</h1>
  @if (imagePath != "")
  {
    <div class="result">
      <img src="@imagePath" alt="Image" />
    </div>
  }
</body>
</html>

הקוד משתמש ב- WebImage כדי לקבל תמונה מהשרת. אתה יוצר את הנתיב אל התמונה באמצעות אותה הטכניקה שבה השתמשת בדוגמאות הקודמות עבור שמירת תמונות, ואתה מעביר את נתיב זה כאשר אתה יוצר תמונה באמצעות:

;"imagePath = @"images\Photo1.jpg

כדי להפוך את התמונה, אתה מפעיל את הפונקציה FlipVertical, ולאחר מכן אתה שומר את התמונה שוב.

הפעל את הדף בדפדפן. התמונה Photo1.jpg מוצגת במהופך. אם תבקש את הדף שוב (למשל רענון הדף), התמונה שוב תתהפך לצד הנכון.
כדי לסובב תמונה, אתה משתמש באותו קוד, אלא שבמקום לקרוא לפונקציות FlipVertical או FlipHorizontal , אתה קורא לפונקציות RotateLeft או RotateRight .

הוספת סימן מים לתמונה

בעת הוספת תמונות לאתר האינטרנט שלך, ייתכן שתרצה להוסיף סימן מים על התמונה לפני שאתה שומר אותה או מציג אותה על דף. אנשים לעיתים קרובות משתמשים בסימני מים כדי להוסיף מידע על זכויות היוצרים לתמונה או לפרסם את שם העסק שלהם.

הוספת סימן מים לתמונה

הוסף דף חדש בשם Watermark.cshtml.

החלף את הקוד הקיים בדף בקוד הבא:

@{  var imagePath = "";
    WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
    if (photo != null)
    {
      imagePath = @"images\Photo2.jpg";
      photo.AddTextWatermark("My Watermark", 
                             fontColor: "Blue",
                             fontFamily: "Arial");
      photo.Save(@"~\" + imagePath);
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Water Mark</title>
  <meta http-equiv="content-type" 
   content="text/html;charset=utf-8" />
</head>
<body>
  <h1>
    Adding a Watermark to an Image</h1>
  @if (imagePath != "")
  {
    <div class="result">
      <img src="@imagePath" alt="Image" />
    </div>
  }
</body>
</html>

קוד זה דומה לקוד ב- Flip.cshtml מהדוגמה הקודמת. כדי להוסיף את סימן המים, אתה מפעיל את הפונקציה AddTextWatermark של WebImage לפני שאתה שומר את התמונה. בקריאה ל- AddTextWatermark אתה מעביר את הטקסט "Watermark My", מגדיר את צבע הגופן לכחול, ומגדיר את משפחת הגופנים ל-Arial. למרות שזה לא הוצגו כאן, WebImage עוזר גם מאפשרת לך לציין אטימות, גודל הגופן, וכן את המיקום של סימן המים טקסט.

הפעל את הדף בדפדפן.

שימוש בתמונה כסימן מים

במקום להשתמש בטקסט עבור מים, אתה יכול להשתמש תמונה אחרת. אנשים לפעמים משתמשים בתמונות כמו לוגו החברה כסימן מים, או שהם משתמשים בתמונת מים במקום הטקסט עבור מידע על זכויות יוצרים.

שימוש בתמונה כסימן מים

הוסף דף חדש בשם ImageWatermark.cshtml.
הוסף תמונה לתיקייה images שאתה יכול להשתמש כמו לוגו, שנה את שם התמונה ל- MyCompanyLogo.jpg. תמונה זו צריכה להיות ברורה כאשר מגדירים אותה ל 80 פיקסלים לרוחב ו- 20 פיקסלים לגובה.

החלף את הקוד הקיים בדף בקוד הבא:

@{  var imagePath = "";
    WebImage WatermarkPhoto = new WebImage(@"~\" +
         @"\Images\MyCompanyLogo.jpg");
    WebImage photo = new WebImage(@"~\Images\Photo3.jpg");
    if (photo != null)
    {
      imagePath = @"images\Photo3.jpg";
      photo.AddImageWatermark(WatermarkPhoto,
         width: 80, height: 20,
         horizontalAlign: "Center", verticalAlign: "Bottom",
         opacity: 100, padding: 10);
      photo.Save(@"~\" + imagePath);
    }
}

<!DOCTYPE html>
<html>
<head>
  <title>Image Watermark</title>
  <meta http-equiv="content-type" 
   content="text/html;charset=utf-8" />
</head>
<body>
  <h1>
    Using an Image as a Watermark</h1>
  @if (imagePath != "")
  {
    <div class="result">
      <img src="@imagePath" alt="Image" />
    </div>
  }
</body>
</html>

זוהי וריאציה נוספת על הקוד מהדוגמאות הקודמות. במקרה זה, אתה קורא לפונקציה AddImageWatermark להוסיף את התמונה כסימן מים (Photo3.jpg) לפני שאתה שומר את התמונה. כאשר אתה קורא לפונקציה AddImageWatermark, אתה מגדיר רוחב עד 80 פיקסלים וגובה עד 20 פיקסלים. התמונה MyCompanyLogo.jpg מיושרת אופקית במרכז ומיושרת אנכית בחלק התחתון של תמונת היעד. האטימות מוגדרת ל- 100% והמרווח הפנימי מוגדר עד 10 פיקסלים. אם תמונת סימן המים גדולה יותר מזו של תמונת היעד, לא יקרה כלום.

הפעל את הדף בדפדפן.

תגיות: ASP.Net, CSHTML

ליאור זמיר

כיום אני ה- Webmaster של תוכנית החדשנות של HPE Software.לפני כן, הייתי מנהל תחום Webmaster ומרצה בכיר בג'ון-ברייס (במשך 9 שנים) בקורסים לפיתוח ותיכנות באמצעות Microsoft .NET, מולטימדיה, בניית אתרי אינטרנט ואינטראנט. פיתוח הדרכה ומתן ייעוץ טכנולוגי.

מאמרים נוספים של ליאור זמיר