Razor-9장 이미지 작업

9 - 이미지 작업 이 장에서는 웹사이트에 이미지 추가, 표시 그리고 조작(크기, 플립, 그리고 워터마크 추가)를 하는 방법을 보여줍니다. 배우게 될 항목 : <OL style="LIST-STYLE-TYPE: decimal"> <LI>동적으로 페이지에 이미지를 추가하는 방법.</LI> <LI>사용자가 이미지를 업로드할 수 있는 방법</LI> <LI>이미지 크기를 조정하는 방법.</LI> <LI>이미지를 플립 또는 회전하는 방법.</LI> <LI>이미지에 워터마크를 추가하는 방법.</LI> <LI>이미지를 워터마크로 사용하는 방법.</LI></OL>   이들은 장에서 소개하는 ASP.NET 프로그래밍 기능입니다 : <UL style="LIST-STYLE-TYPE: disc"> <LI>WebImage Helper</LI> <LI>Path 개체는 경로와 파일 이름을 조작한는 방법을 제공합니다. </LI></UL>   1. 웹 페이지에 동적으로 이미지를 추가하기 웹사이트를 개발하는 동안 웹사이트 및 개별 페이지에 이미지를 추가할 수 있습니다. 또한 사용자가 그들이 프로필 사진을 이미지를 업로드하는데 유용할게 할 수 있습니다.   이미지가 이미 귀하의 사이트에서 사용할 수있다면 단지 한 페이지에 표시하려면, 당신은 이런식으로 HTML을 <img> 요소를 사용 :   <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid">img src="images/Photo1.jpg" alt="Sample Photo" /> </TD></TR></TBODY></TABLE>   하지만, 페이지가 시작될 때까지 표시되는 이미지를 모르지만 가끔은 동적으로 이미지를 표시할 수 있기을 원합니다. 이 섹션의 절차에서는 사용자가 이미지 이름의 목록에서 이미지 파일 이름을 지정 즉시 이미지를 표시하는 방법을 보여줍니다. 그들은, 드롭 다운 목록에서 이미지의 이름을 선택하고 그들은 페이지를 제출하면, 그들이 선택한 이미지가 표시됩니다. <OL style="LIST-STYLE-TYPE: decimal"> <LI>WebMatrix에서 새로운 웹사이트를 만들 수 있습니다. </LI> <LI>DynamicImage.cshtml라는 새 페이지를 마듭니다. </LI> <LI>웹사이트의 루트 폴더에 새 폴더를 추가하고 그것을 Images라고 지정합니다. </LI> <LI>Images 폴더에 4개의 이미지를 넣습니다.(photo1.jpg, photo2.jpg, photo3.jpg, photo4.jpg) </LI> <LI>다음과 같이 페이지에있는 기존의 마크업 교체합니다: <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid"> @{     var imagePath ="";     if(Request["photoChoice"] !=null){         imagePath = @"images\"+Request["photoChoice"];     } } <!DOCTYPE html> <html> <head>   <title>Display Image on the Fly</title> </head> <body> <h1>이미지를 즉시 표현</h1> <form method="post" action="">     <div>         나는 즉시 사진을 보고싶어요:         <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="그림보기" />     </div>     <dir style="padding: 10px">         @if(imagePath !=""){             <img src="@imagePath" alt="사랑하는 가족 사진" width="300px" />            }     </dir> </form> </body> </html> </TD></TR></TBODY></TABLE> 페이지의 본문에 photoChoice의 드롭 다운 목록 (<select> 요소)을 만들었습니다. 목록은 세 가지 옵션을 가지고 각각의 목록 옵션의 value 속성은 이미지 폴더에 넣고 이미지 중 하나의 이름이 있습니다. 기본적으로 목록은 사용자가 "photo 1"과 같은 친숙한 이름을 선택하실 수 있습니다, 그리고 그것은 다음을 전달합니다. 페이지를 제출할 때 파일 이름을 jpg로. 이 코드에서는 Request["photoChoice"](즉, 이미지 파일 이름은)에 의해 사용자의 선택 사항을 확인할 수 있습니다. 선택한 이미지가 있다면, 당신은 이미지와 사용자의 이미지 파일 이름에 폴더의 이름들로 구성된 이미지에 대한 경로를 구성합니다. (당신은 경로를 만들려고하면 ReQuest["photoChoice"]가 없다는 오류 메시지를 받을 것입니다.) 그 결과는 아래와 같은 경로를 검색할 것입니다. images/Photo1.jpg 경로는 사용자가 페이지에서 요구되는 ImagePath로 명명된 변수에 저장됩니다. 본문에 사용자가 선택한 그 이미지를 표시하는 데 사용의 <img> 요소. 당신은 정적 요소를 표시 할 것 같은 src 특성은 파일 이름 또는 URL로 설정되지 않습니다. 대신, 그것은 코드에 설정된 경로로부터 그 가치를 얻을 것을 의미하는 @ImagePath로 설정됩니다. 사용자가 아무것도 선택하지 않았기 때문에 페이지가 처음 실행에도 불구하고, 표시할 이미지가 없습니다. 이것은 평소의 src 속성이 비어있는 것을 의미하는 것으로 이미지로서 보여 주면 빨간색 "x"(또는 그게 뭐든간에 이미지를 찾을 수없는 브라우저 렌더링)합니다. 이것을 방지하려면, if 블록 안에 <img> 요소를 넣어 @ImagePath 변수를 지정합니다. 사용자가 선택을 한 경우, @ImagePath에 경로가 확인되고 페이지에 표시됩니다 처음 경우 사용자 또는 이미지를 선택하지 않았다면, <img> 요소도 표시되지 않습니다. </LI> <LI>Save하고 브라우저에서 페이지를 실행합니다. (페이지는 당신이 그것을 실행하기 전에 파일의 작업 공간에서 선택되어 있는지 확인합니다.) <img src="https://t1.daumcdn.net/cfile/cafe/1917D03D4DCF46A23F" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="588" border="0" hspace="1" vspace="1" width="588" id="A_1917D03D4DCF46A23FCD2A"/></LI></OL>   2. 이미지 업로드 이전 예제에서는 동적으로 이미지를 표시하는 것을 보여줬지만, 웹사이트에 이미 있던 이미지를 사용했습니다. 이 절차에서는 사용자가 다음 페이지에 표시되는 이미지를 업로드할 수 있도록 보여줍니다. ASP.NET에서는 조작, 생성하도록 방법을 가지고있는 WebImage Helper를 사용하여 즉시 이미지를 조작하고 이미지를 저장합니다. WebImage Helper는 . jpg로, PNG 및 BMP 파일을포함 모든 일반적인 웹 이미지 파일 형식을 지원합니다.   <img src="https://t1.daumcdn.net/cfile/cafe/126DBE3F4DCF4CF02E" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="562" border="0" hspace="1" vspace="1" width="562" id="A_126DBE3F4DCF4CF02E83C5"/> <OL style="LIST-STYLE-TYPE: decimal"> <LI>새 페이지 UploadImage.cshtml 를 만듭니다. </LI> <LI>다음과 같이 페이지에있는 기존의 마크업 교체합니다: <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid">@{     WebImage photo = null;     var newFileName = "";     var imagePath = "";         if(IsPost){     photo = WebImage.GetImageFromRequest();     if(photo !=null){         newFileName = Guid.NewGuid().ToString()+"_"+Path.GetFileName(photo.FileName); //Unique(유일한 이름 생성)         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> 이미지 업로드 </legend>       <label for="Image">사진 올리기</label>       <input type="file" name="Image" />             <input type="submit" value="Upload" />     </fieldset>   </form>   <h1>업로드된 이미지 표시</h1>     @if(imagePath != ""){     <div class="result">         <img src="@imagePath" width="600px" alt="image" />       </div>     } </body> </html> </TD></TR></TBODY></TABLE> 텍스트의 본문은 사용자가 업로드하는 파일을 선택할 수 있습니다 <input type="file"> 요소를 가지고있다. 그들이 제출을 클릭하면, 선택한 파일의 양식과 함께 제출합니다. 업로드된 이미지를 얻는 작업을 위한 유용한 모든 방법에서 WebImage Helper를 사용합니다. 특히, 얻은 이미지를 photo라는 이름의 변수에 WebImage.GetImageFromRequest 메서드를 사용하여 담아둠니다. 이 예제에서 넘겨 받은 파일의 경로 및 이름을 설정합니다. 문제는 사용자가 업로드한 이미지의 이름을 얻기 원하며, 저장소에 새로운 경로를 만들어야 하지만, 사용자의 이미지 이름이 중복될 수 있기 때문에 사용자의 이미지 이름에 유일한 일름을 생성하여 추가해 주어 기존의 이미지를 덮어 쓰지 않도록 합니다. 이미지가 실제로 업로드되었을 경우 (if(photo ! = null)), 이미지의 파일 이름 속성에서 이미지 이름을 얻어야합니다. 사용자가 이미지를 업로드하면, FileName은 사용자의 컴퓨터에서 경로가 포함된 사용자의 원래 이름을 포함하고 있습니다. 그것은 다음과 같이 : <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid"> C:\Users\Joe\Pictures\SamplePhoto1.jpg</TD></TR></TBODY></TABLE> 하지만 모든 경로 정보를 원치 않습니다 - 단지, 실제 파일 이름을 (SamplePhoto1.jpg) 원하기 때문에 아래와 같은 같은 Path.GetFileName 메서드를 사용하여 아래와 같이 경로에서 파일명을 분리합니다 : <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid">Path.GetFileName(photo.FileName) </TD></TR></TBODY></TABLE> 그런 다음 원래 이름에 Guid를 추가하여 새 고유 파일 이름을 만듭니다. (Guid 대한 자세한 내용은이 장의 뒷부분에서 Guid의 정보를 참조하십시오.) 그럼 당신이 이미지를 저장하는 데 사용할 수있는 전체 경로를 구성합니다. 현재 웹사이트의 폴더(이미지)에 새로운 이름으로 저장 경로가 구성되었습니다. <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; BACKGROUND-COLOR: #d5d5d5; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid" rows="1" cols="1"> 참고,이미지 폴더에 응용프로그램이 파일을 저장하도록 읽기/쓰기 권한을 해당 폴더에 대한 권한을 써주세요. 개발 컴퓨터에서는 일반적으로 문제가되지 않습니다. 그러나, 당신은 호스팅 제공 업체의 웹 서버에 사이트를 게시할 때, 당신은 명시적으로 해당 권한을 설정해야 할 수 있습니다. 호스팅 제공 업체의 서버에서이 코드를 실행하면 오류를 일으킬 때, 호스팅 제공 업체에 그 권한을 성정하는 방법을 확인하세요.</TD></TR></TBODY></TABLE> 마지막으로 WebImage Helper의 Save 메서드로 저장경로(imagePase)를 전달합니다. 이미지는 새로운 이름으로 저장됩니다. 저장 방법은 다음과 같습니다 :  <CODE>photo.Save(@"~\" + imagePath)</CODE>. 현재 웹사이트의 위치 <CODE>@"~\"</CODE>에 전체 경로가 추가됩니다. (~ 연산자에 대한 자세한 내용 장 2 참조.) 이전 예제와 마찬가지로 페이지의 본문에 이미지를 표시하는 <img> 요소가 포함되어 있습니다. ImagePath가 설정된 경우 ImagePath를 값으로 설정되는 src 특성을 이용하여 <img> 요소를 렌더링합니다. </LI> <LI>브라우저에서 페이지를 실행합니다. </LI></OL>   <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; BACKGROUND-COLOR: #faf4c0; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid" rows="1" cols="1">  GUID에 대하여 GUID는 (Globally Unique Identifier, 전역 고유 ID)는 936DA01F-9ABD-4d9d-80C7-02AF85C822A8 와 같은식의 식별자입니다. (기술적으로, 그것은 16-byte/128-bit 숫자입니다.) GUID가 필요하면 GUID를 생성하는 특수 코드를 호출할 수 있습니다. GUID의 뒤에 아이디어는 번호의 거대한 크기  (3.4 x 1038)와 그것을 생성하는 알고리즘 사이에 발생하는 번호가 일치하지 않는 것을 보장합니다. 따라서 GUID는 두 번 동일한 이름을 사용하지 않을 것을 보장해야 할 때 사물들의 이름을 생성하는 좋은 방법입니다. 물론, GUID는 사용자 친화적이지 못한 숫자 조합이기 때문에 이름이 코드에서만 사용할 때 사용되는 경향이 있습니다.</TD></TR></TBODY></TABLE>       3. 이미지 크기 조절 웹사이트가 사용자의 이미지를 수락하면 표시 전에 그들을 저장, 당신은 이미지 크기를 조정 할 수 있습니다. 여기에서 다시 WebImage Helper를 사용할 수 있습니다. 이 절차는 업로드된 이미지 크기를 조정하여 축소판을 만드는 방법을 설명합니다. 다음 웹사이트에서 작은 이미지와 원본 이미지 저장 보여줍니다.  페이지에 축소판을 표시하고 전체 크기 이미지로 사용자를 리디렉션에 대한 하이퍼 링크를 만듭니다.   <OL style="LIST-STYLE-TYPE: decimal"> <LI>Thumbnail.cshtml라고 파일을 만듭니다. </LI> <LI>이미지 폴더, "thumbs"라는 하위 폴더를 만듭니다. </LI> <LI>다음과 같이 페이지에있는 기존의 마크업를 교체합니다: <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid">@{     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 <A href='mailto:=@"images\thumbs\'>=@"images\thumbs\</A>" + newFileName;             photo.Resize(width:60, height: 60, preserveAspectRatio: true,                preventEnlarge:true );             photo.Save(@"~\" + imageThumbPath);         }     } } <!DOCTYPE html> <html>     <head>         <title>             섬네일을 만들고 저장하는 장         </title>     </head>     <body>         <h1>섬네일 이미지</h1>         <form action="" method="post" enctype="multipart/form-data">                         <fieldset>                 <legend>섬네일 만들기</legend>                 <label for="Image">이미지"</label>                 <input type="file" name="Image"/>                                 <input type="submit" value="이미지넣기"/>             </fieldset>         </form>         @if(imagePath !=""){         <div class="result">             <img src="@imageThumbPath" alt="Thumbnail image"/>             <a href="@Html.AttributeEncode(imagePath)" target"_Self">큰파일 보기</a>         </div>         }     </body> </html></TD></TR></TBODY></TABLE> 이 코드는 이전 예제의 코드와 비슷합니다. 차이점은 일반적으로 이미지의 축소판 복사본을 생성 한 후, 두 이미지를 저장하는 것입니다. 우선 업로드된 이미지를 Images폴더에 저장합니다. 그런 다음 작은 이미지에 대한 새 경로를 구성합니다. 실제로 작은 이미지를 만들려면, 가로 세고 60픽셀을 만드는 WebImage Helper Resize 메서드를 호출합니다. 예제는 가로 세로 비율을 유지하는 방법과 확대되지 않도록 이미지를 예방할 수 있습니다. (경우에 새로운 크기가 실제로 이미지가 더 큰 할거) 보여줍니다. 다음에 thumbs 하위 폴더에 저장합니다. 마크업의 끝에서, 조건부 이미지를 표시하려면 이전 예제에서 본 적이 동적 src 특성과 같은 <img> 요소를 사용합니다. 이 경우에, 당신은 작은 이미지를 표시합니다. 또한 이미지의 큰 버전에 대한 하이퍼 링크를 만드는데 <a>요소를 사용합니다. <a> 요소의 href 속성을 <img> 요소의 src 특성과 마찬가지로 동적으로 ImagePath를 설정합니다. URL 경로를 만들려면, Html.AttributeEncode 메서드로 ImagePath를 넘기면,  문자를 변환하여 경로를 생성하여 줍니다. </LI> <LI>브라우저에서 페이지를 실행합니다. <img src="https://t1.daumcdn.net/cfile/cafe/20452E564DD2ED5916" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="712" border="0" hspace="1" vspace="1" width="712" id="A_20452E564DD2ED5916AA74"/> 큰파일 보기를 클릭한 화면입니다. <img src="https://t1.daumcdn.net/cfile/cafe/154926564DD2ED5912" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="826" border="0" hspace="1" vspace="1" width="826" id="A_154926564DD2ED5912B9C0"/> </LI></OL>   4. 이미지를 회전하고 뒤집기 WebImage Helper 또한 회전시키면서 뒤집기를 회전할 수 있습니다. 이 절차는, 그것을 저장한 다음 페이지에 뒤집힌 이미지를 표시, (세로) 거꾸로 뒤집기, 서버에서 이미지를 이미지를 얻는 방법을 보여줍니다. 이 예제에서는, 서버에 있는(Photo2.jpg) 파일을 사용하고 있습니다. 이전 예제에서 그랬던 것처럼 실제 응용 프로그램에서는, 이미지를 동적으로 얻어 플립하는 방법을 배웁니다. <OL style="LIST-STYLE-TYPE: decimal"> <LI>1.Flip.cshtml라는 파일을 만듭니다. </LI> <LI>다음과 같이 파일에있는 기존의 마크업 교체합니다: <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid">@{     var imagePath ="";     WebImage photo = new WebImage(@"~\Images\photo2.jpg");     if(photo !=null){         imagePath = @"Images\photo2.jpg";         photo.FlipVertical();         photo.Save(@"~\" + imagePath);     } } <!DOCTYPE html> <html>     <head>         <title>이미지 뒤집기</title>         <meta http-equiv="content-type" content="text.html;charest=utf-8"/>     </head>     <body>         <h1>수직으로 뒤집기</h1>         @if(imagePath !=""){             <div class="result">                 <img src="@imagePath" alt="Image"/>             </div>         }     </body> </html> </TD></TR></TBODY></TABLE> 이 코드는 서버에서 이미지를 얻을 수있는 WebImage Helper를 사용합니다. 이미지를 저장하는 이전 예제에서 사용한 것과 동일한 기술을 사용하여 이미지의 경로를 만들고,  WebImage를 사용하여 이미지를 만들 때 그 경로를 대입시킵니다: <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid"> WebImage photo = new WebImage(@"~\Images\Photo2.jpg");</TD></TR></TBODY></TABLE> 이미지를 찾을 경우 이전 예제에서처럼, 새로운 경로와 파일 이름을 구성합니다. 이미지를 뒤집기 위해, FlipVertical 메서드를 호출 후 다시 이미지를 저장합니다. 이미지가 다시 ImagePath를 설정 src 특성과 <img> 요소를 사용하여 페이지에 표시됩니다. </LI> <LI>브라우저에서 페이지를 실행합니다. Photo2.jpg에 대한 이미지가 거꾸로 표시됩니다. <img src="https://t1.daumcdn.net/cfile/cafe/20570D524DD2F5BE1C" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="710" border="0" hspace="1" vspace="1" width="710" id="A_20570D524DD2F5BE1C7835"/> 다시 페이지를 요청하면, 이미지는 다시 오른쪽을 뒤집어 집니다. 이미지를 회전하려면, 당신은 대신 FlipVertical 또는 FlipHorizontal를 호출,  RotateLeft 를 호출하거나 또는 RotateRight 호출에 동일한 코드를 사용합니다.</LI></OL>     5. 이미지에 워터마크를 추가 이미지를 서버에 저장하기 전이나 웹페이지에 표시할 때 워터마크를 사용합니다. 사람들은 종종 이미지 광고를 게재하거나 자신의 회사 이름 저작권 정보를 추가하려면 워터마크를 사용합니다.   <OL style="LIST-STYLE-TYPE: decimal"> <LI>새 페이지 Watermark.cshtml라고 명명합니다. </LI> <LI>다음과 같이 기존 마크업 교체합니다: <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid">@{  var imagePath= "";     WebImage photo = new WebImage(@"~\Images\Photo3.jpg");     if(photo != null){         imagePath = @"images\Photo3.jpg";         photo.AddTextWatermark("My Watermark", fontColor:"Yellow", 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> </TD></TR></TBODY></TABLE> 이 코드는 이전부터 Flip.cshtml 페이지에있는 코드(이것은 Photo3.jpg 파일을)와 같은 것입니다. 당신이 이미지를 저장하기 전에 워터마크를 추가하려면, 당신은 WebImage Helper의 AddTextWatermark 메서드를 호출합니다. AddTextWatermark에 대한 호출하고, 텍스트에 "My Watermark"을 넣고, 노랑의 글꼴 색상을 설정하고 굴림로 글꼴 패밀리를 설정합니다. (이것은 여기에 표시되지 않지만, WebImage 도우미 또한 불투명도, 글꼴 패밀리 및 글꼴 크기와 워터마크 텍스트의 위치를 지정할 수 있습니다.) 이미지를 저장하기 위해서는 읽기 전용으로 되어서는 안됩니다. 전에 본적있는 이미지가 @ImagePath를 설정 src 특성과 <img> 요소를 사용하여 페이지에 표시됩니다. </LI> <LI>브라우저에 서실행한 페이지입니다. <img src="https://t1.daumcdn.net/cfile/cafe/1525BD534DD2F80520" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="822" border="0" hspace="1" vspace="1" width="822" id="A_1525BD534DD2F80520C6EB"/> </LI></OL> 6. 워터마크로 이미지를 사용 워터마크를 텍스트로 하는 대신, 다른 이미지를 사용할 수 있습니다. 가끔은 워터마크로 회사 로고 같은 이미지를 사용하거나, 저작권 정보에 대한 텍스트 대신에 워터마크 이미지를 사용합니다. <OL style="LIST-STYLE-TYPE: decimal"> <LI>새 페이지 ImageWatermark.cshtml라고 명명합니다. </LI> <LI>로고를 사용할 수 있으며, 이미지 SantaLogo.jpg 이름을 바꾸려면 Images 폴더에 그것이 80 픽셀 너비와 높이 50 픽셀로 만든 이미지를 넣습니다. </LI> <LI>다음과 같이 기존 마크업 교체합니다: <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=700> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid">@{  var imagePath = "";    WebImage WatermarkPhoto = new WebImage(@"~\" +         @"\Images\SantaLogo.jpg");     WebImage photo = new WebImage(@"~\Images\Photo4.jpg");     if(photo != null){         imagePath = @"images\Photo1.jpg";         photo.AddImageWatermark(WatermarkPhoto, width: 80, height: 50,            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> </TD></TR></TBODY></TABLE> 이것은 이전 예제에서 코드의 또 다른 변형입니다. 이 경우에, 이미지를 저장하기 전에 AddImageWatermark 메서드를 호출하여 대상 이미지 (Photo3.jpg)에 워터마크 이미지를 추가합니다. 당신이 AddImageWatermark를 호출하면, 당신은 50픽셀의 높이와 80 픽셀의 너비를 설정합니다. SantaLogo.jpg 이미지가 수평 중앙에 정렬됩니다 수직 대상 이미지의 하단에 정렬. 불투명도는 100 %로 설정되고 패딩 10 픽셀로 설정됩니다. 워터마크 이미지는 대상 이미지보다 더 큰 경우, 아무것도 일어나지 않습니다. 워터마크 이미지는 대상 이미지보다 크지 않다면 당신은 0으로 이미지 워터마크의 패딩을 설정, 워터마크는 무시됩니다. 이전처럼, 당신은 <img> 요소와 역동적인 src 특성을 사용하여 이미지를 표시합니다. </LI> <LI>브라우저에서 실행한 페이지입니다. <img src="https://t1.daumcdn.net/cfile/cafe/164ECA564DD2FDB02A" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="790" border="0" hspace="1" vspace="1" width="790" id="A_164ECA564DD2FDB02AB8FE"/>  </LI></OL>