MVC4 Bildgröße auf maximale Höhe oder maximale Breite ändern

Question

Ich erstelle MVC4 Website und möchte jedes erlaubte Bild aus der Datenbank anzeigen. Das Problem ist, dass Bilder unterschiedliche Größe haben, einige von ihnen haben Hochformat und die anderen haben Landschaft. Zuallererst müssen alle Bilder das Seitenverhältnis beibehalten. Jedes Bild wird in einer div-benannten Karte angezeigt und es sollte eine Standardgröße haben (Größe I, die in Kontrolle eingestellt ist). Also muss ich das Bild auf diese Weise skalieren, dass weder die Höhe noch die Breite die Höhe und die Breite der Steuerung überschreiten darf. Zum Beispiel, wenn ein Bild Hochformat hat, darf die Höhe nicht höher sein als , also wenn das Bild eine Querformatausrichtung hat, sollte es auf diese Weise skaliert werden, damit die Breite nicht die Breite von überschreiten kann. ich Bilder auf diese Weise angezeigt:

-Controller

[ChildActionOnly] 
    public ActionResult _PhotoGallery(int number) 
    { 
     List<Photo> photos; 

     if (number == 0) 
     { 
      photos = context.FindAllUnVisiblePhotos(true).OrderByDescending(x => x.CreatedDate).ToList(); 
     } 
     else 
     { 
      photos = context.FindAllUnVisiblePhotos(true).OrderByDescending(x => x.CreatedDate).Take(number).ToList(); 
     } 

     return PartialView("_PhotoGallery", photos); 
    } 

Ansicht

@foreach (var item in Model) 
{ 
    <div class="photo-index-card"> 
     <div style="float:left; padding: 2px 2px 2px 2px; margin: 0px 0px 10px 0px; height: 20px;"> 
      <div>@item.Title</div> 
     </div> 

     <div style="float:left;"> 
      @if (item.PhotoFile != null) 
      { 
       <a href="@Url.Action("Display", "Photo", new { id = item.PhotoID })"> 
        <img class="photo-index-card-img" src="@Url.Action("GetImage", "Photo", new { id = item.PhotoID })" /> 
       </a> 
      } 
     </div>     
    </div> 
} 

GetImage

public FileContentResult GetImage(int id) 
    { 
     Photo photo = context.FindPhotoById(id); 
     if (photo.PhotoFile != null) 
     { 
      return File(photo.PhotoFile, photo.ImageMimeType); 
     } 
     else 
     { 
      return null; 
     } 
    } 

Wie konnte ich die Größe von Bildern requrements passen?

Answer 1

Der einzige Weg, die Porträtfotos zuzuschneiden, um in das Bild zu passen. Ich habe diese VB-Funktion, die genau so vorgeht, wie du es sagst, indem du 25% des extra hohen Pixels von oben kommst und den Rest von unten. Die meisten Fotos sehen auf diese Weise gut aus. Ich benutze das in einer Tourismus-Website.

Public Shared Function SaveAsThumbnailCropped(ByVal path As String, ByVal archivo As String, ByVal NewWidth As Integer, ByVal NewHeight As Integer) As String 

    ' Declare two variables of type Integer named 
    ' adjustedImageWidth and adjustedImageHeight. 
    Dim adjustedImageWidth, adjustedImageHeight As Integer 

    ' Declare a variable named theImage of type Image. 
    Dim theImage As Image 
    Dim ThumbFileName, extension As String, convertToGIF As Boolean = False 
    If InStrRev(archivo, ".") > 0 Then 
     extension = Mid(archivo, InStrRev(archivo, ".")).ToString.ToLower 
     ThumbFileName = Mid(archivo, 1, InStrRev(archivo, ".") - 1) + "_tb" + Trim(NewWidth) + "x" + Trim(NewHeight) + extension 
    Else 
     extension = "" 'desconocida 
     ThumbFileName = archivo + "_tb" + Trim(NewWidth) + "x" + Trim(NewHeight) 
    End If 


    If Not My.Computer.FileSystem.FileExists(path + "\" + ThumbFileName) And My.Computer.FileSystem.FileExists(path + "\" + archivo) Then 
     ' Get an image object from the image file; 
     ' assign the image object to the theImage variable. 
     theImage = System.Drawing.Image.FromFile(path + "\" + archivo) 

     If theImage.Height > NewHeight Or theImage.Width > NewWidth Then 
      If theImage.Height * NewWidth/theImage.Width > NewHeight Then 
       ' tengo que reducir el alto 
       adjustedImageHeight = NewHeight 
       'keep ratio 
       adjustedImageWidth = theImage.Width * (adjustedImageHeight/theImage.Height) 
      Else 
       adjustedImageWidth = NewWidth 
       'keep ratio 
       adjustedImageHeight = theImage.Height * (adjustedImageWidth/theImage.Width) 
      End If 
     Else 
      'no hago nada porque la imagen es muy chica 
      Return archivo 
     End If 

     Dim cropRect As Rectangle 
     If adjustedImageHeight < NewHeight Or adjustedImageWidth > NewWidth Then 
      'era muy apaisada tengo que croppear el centro 
      adjustedImageHeight = NewHeight 
      adjustedImageWidth = theImage.Width * (adjustedImageHeight/theImage.Height) 
      Dim WidthSobrante = adjustedImageWidth - NewWidth 
      cropRect = New Rectangle(WidthSobrante/2, 0, NewWidth, NewHeight) 
     ElseIf adjustedImageHeight > NewHeight Or adjustedImageWidth < NewWidth Then 
      adjustedImageWidth = NewWidth 
      adjustedImageHeight = theImage.Height * (adjustedImageWidth/theImage.Width) 
      'quedo muy larga. Le cropeo el 25% de arriba del sobrante 
      Dim HeightSobrante = adjustedImageHeight - NewHeight 
      cropRect = New Rectangle(0, HeightSobrante/4, NewWidth, NewHeight) 
     Else 
      cropRect = New Rectangle(0, 0, Math.Min(NewWidth, theImage.Width), Math.Min(NewHeight, theImage.Height)) 
     End If 

     Dim Image As System.Drawing.Image = theImage 
     Dim thumbnail As System.Drawing.Image = New Bitmap(adjustedImageWidth, adjustedImageHeight) 
     Dim graphic As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(thumbnail) 

     graphic.InterpolationMode = InterpolationMode.HighQualityBicubic 
     graphic.SmoothingMode = SmoothingMode.HighQuality 
     graphic.PixelOffsetMode = PixelOffsetMode.HighQuality 
     graphic.CompositingQuality = CompositingQuality.HighQuality 

     graphic.DrawImage(Image, 0, 0, adjustedImageWidth, adjustedImageHeight) 

     Dim croppedThumbnail = cropImage(thumbnail, cropRect) 


     If extension.Equals(".gif") Then 
      Dim quantizer As ImageQuantization.OctreeQuantizer = New ImageQuantization.OctreeQuantizer(255, 8) 
      Dim quantized As Bitmap = quantizer.Quantize(croppedThumbnail) 
      quantized.Save(path + "\" + ThumbFileName, System.Drawing.Imaging.ImageFormat.Gif) 

     ElseIf extension.Equals(".jpg") Or extension.Equals(".jpeg") Then 
      'Create quality parameter 
      Dim encoderParams As New EncoderParameters(1) 

      Dim jpgCodec As ImageCodecInfo 
      jpgCodec = GetImageCodec("image/jpeg") 

      If Not jpgCodec Is Nothing Then 
       'Create quality parameter 
       Dim qParam As New EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L) 
       encoderParams.Param(0) = qParam 
       croppedThumbnail.Save(path + "\" + ThumbFileName, jpgCodec, encoderParams) 
      End If 
     Else 
      croppedThumbnail.Save(path + "\" + ThumbFileName) 
     End If 

     croppedThumbnail.Dispose() 
     thumbnail.Dispose() 
     Image.Dispose() 
     graphic.Dispose() 

    End If 

    Return ThumbFileName 


End Function 

Private Shared Function cropImage(img As Image, cropArea As Rectangle) As Image 
    Dim bmpImage = New Bitmap(img) 
    Dim bmpCrop = bmpImage.Clone(cropArea, bmpImage.PixelFormat) 
    Return CType(bmpCrop, Image) 
End Function 



Private Shared Function GetImageCodec(ByVal mimeType As String) As ImageCodecInfo 
    Dim codecs() As ImageCodecInfo = ImageCodecInfo.GetImageEncoders() 
    For Each codec As ImageCodecInfo In codecs 
     If codec.MimeType.Equals(mimeType, StringComparison.OrdinalIgnoreCase) Then 
      Return codec 
     End If 
    Next 

    Return Nothing 
End Function 

Answer 2

Dank Eduardo, Sie haben mir geholfen, eine Lösung zu finden. Ich modifizierte GetImage-Methode, so dass es sicher, dass jede Dimension des Bildes weniger als gewünscht ist. -Code wird mehr als Worte erklärt:

public FileContentResult GetImage(int id, int w, int h) 
    { 
     Photo photo = context.FindPhotoById(id); 
     MemoryStream ms; 
     if (photo.PhotoFile != null) 
     { 
      if (w != 0 && h != 0) 
      { 
       ms = new MemoryStream(photo.PhotoFile); 
       Image img = Image.FromStream(ms); 
       var ratio = (double)img.Width/(double)img.Height; 
       var ratioImg = (double)w/(double)h; 
       var newHeight = 0; 
       var newWidth = 0; 

       if (img.Height > img.Width) 
       { 
        newHeight = h; 
        newWidth = (int)(ratio * newHeight); 
       } 
       else 
       { 
        newWidth = w; 
        newHeight = (int)(newWidth/ratio); 
       } 

       var newImage = new Bitmap(newWidth, newHeight); 
       var destRect = new Rectangle(0, 0, newWidth, newHeight); 

       using (var graphics = Graphics.FromImage(newImage)) 
       { 
        graphics.CompositingMode = CompositingMode.SourceCopy; 
        graphics.CompositingQuality = CompositingQuality.HighQuality; 
        graphics.InterpolationMode = InterpolationMode.HighQualityBicubic; 
        graphics.SmoothingMode = SmoothingMode.HighQuality; 
        graphics.PixelOffsetMode = PixelOffsetMode.HighQuality; 

        using (var wrapMode = new ImageAttributes()) 
        { 
         wrapMode.SetWrapMode(WrapMode.TileFlipXY); 
         graphics.DrawImage(img, destRect, 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, wrapMode); 
        } 
       } 

       Bitmap bmp = new Bitmap(newImage); 
       ImageConverter icnv = new ImageConverter(); 

       var imgByte = (byte[])icnv.ConvertTo(bmp, typeof(byte[])); 

       return File(imgByte, photo.ImageMimeType); 
      } 
      else 
      { 
       return File(photo.PhotoFile, photo.ImageMimeType); 
      }     
     } 
     else 
     { 
      return null; 
     } 
    } 

Also, wenn das Bild im Hochformat hat, Methode setzt auf gewünschte Höhe seine Höhe und setzt das Seitenverhältnis Breite beibehalten wird, so dass Höhe nicht maximale Höhe nicht überschreiten kann. Wenn das Bild im Querformat ausgerichtet ist, wird die gewünschte Breite eingestellt und die Höhe wird beibehalten.