HowTo: jCrop & ASP.NET MVC – On the fly Bildverkleinern

Auf vielen Seiten kann man Profilbilder hinterlegen. Meinstens müssen diese eine bestimmte Größe haben, ansonsten wird das Bild gestaucht oder gezerrt. Beides eher suboptimal. Mit jCrop gibt es ein kleines, nützliches jQuery Plugin, welches man benutzen kann um bestimmte Ausschnitte aus einem Bild auszuschneiden. jCrop macht dies Client-Seitig und ich möchte das “ausgeschnittene” Bild nun auch in ASP.NET MVC verarbeiten…

ASP.NET jCrop Control

Auf Codeplex gibt es bereits ein vorgefertiges ASP.NET Control. Evtl. funktioniert das Control auch in ASP.NET MVC, dies habe ich nicht getestet, da ich den “Cropping” Code bei mir in ein Controller-Action getan habe. Daher schonmal großen Dank an Cem Sisman.

Schritt für Schritt:

1. Grundlagen

- ASP.NET MVC Projekt anlegen
- jQuery in der Site.Master hinzufügen
- in der Site.Master noch ein ContentPlaceHolder für Javascript hinzufügen (dort kommt der Javascript Teil von jCrop hin).

2. jCrop runterladen

Nun benötigt man ein Bild (ich hab ein Beispielbild von jCrop genommen), die jquery.Jcrop.css Datei und die jquery.JCrop.min.js Javascript Datei.

Die Javascript und CSS Datei muss natürlich in der Site.Master noch mit angegeben werden.

5. Der “View” – HTML

Wir stellen uns vor, dass Bild wäre schon hochgeladen und wir möchten jetzt ein Ausschnitt auswählen. Dem Benutzer zeigen wir direkt eine kleine Preview an, so wie hier.

Im ersten “p” ist das Originalbild. Im zweiten “p” kommt die Preview hin. Die Styleattribute beim p werden benötigt, da ansonsten das Bild “rausragen würde. So beschränken wir es auf 100px.

Was macht jCrop eigentlich?

jCrop zeigt in der Preview nur den ausgewählten Bereich an. Das Ursprungsbild wird hierbei nicht verändern. Stattdessen wir nur der Sichtbereich geändert.

Unter “Form Data” kommt für die Verarbeitung dann die wichtigen Daten: X/Y als Startkoordinaten und eine Höhe und Breite. Diese Daten schicken wir per POST an die PostPicture Methode.

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Crop</h2>

    <p>
        <!-- "Original" -->
        <img id="cropbox" src="<%=Url.Content("~/Content/flowers.jpg") %>" />
    </p>
    <p style="width:100px;height:100px;overflow:hidden;">
        <!-- Crop Preview -->
        <img id="preview" src="<%=Url.Content("~/Content/flowers.jpg") %>" />
    </p>
    <p>
        <!-- Form Data -->
        <form action="<%=Url.Action("PostPicture") %>" method="post">
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
        <button type="submit">Send</button>
        </form>
    </p>
</asp:Content>

5. Der View – der Javascript Teil

Sobald die Seite geladen wird, werden dem original Bild “Eventhandler” angehangen. Hier kann man auch alle Optionen die man möchte mit angeben.

In der “showPreview” Funktion wird als Parameter die Koordinaten des gezeichneten Rahmens übergeben. In der if-Abfrage wird das Preview Bild anhand von CSS Eigenschaften “erzeugt” und im letzten Abschnitt werden die 4 Werte in die Inputfelder geschrieben: X,Y,W,H.

		<script language="Javascript">

			// Remember to invoke within jQuery(window).load(...)
			// If you don't, Jcrop may not initialize properly
			jQuery(window).load(function(){

				jQuery('#cropbox').Jcrop({
					onChange: showPreview,
					onSelect: showPreview,
					aspectRatio: 1
				});

			});

			// Our simple event handler, called from onChange and onSelect
			// event handlers, as per the Jcrop invocation above
			function showPreview(coords)
			{
				if (parseInt(coords.w) > 0)
				{
					var rx = 100 / coords.w;
					var ry = 100 / coords.h;

					jQuery('#preview').css({
						width: Math.round(rx * 500) + 'px',
						height: Math.round(ry * 370) + 'px',
						marginLeft: '-' + Math.round(rx * coords.x) + 'px',
						marginTop: '-' + Math.round(ry * coords.y) + 'px'
					});
	            }

	            $('#x').val(coords.x);
	            $('#y').val(coords.y);
	            $('#w').val(coords.w);
	            $('#h').val(coords.h);
			}

		</script>

6. Der Controller – Crop

Die 4 Werte kommen in die Methode rein. Dann hole ich mir mein Bild, welches in diesem Fall statisch im Code drin steht. Dann erzeuge ich mir ein Rechteck der neuen größe und male das Ursprungsbild mit DrawImage auf die neue Fläche.

        public ImageResult PostPicture(int x, int y, int h, int w)
        {
            Image image = Image.FromFile(Path.Combine(this.Request.PhysicalApplicationPath,"Content/flowers.jpg"));
            Bitmap cropedImage = new Bitmap(w, h, image.PixelFormat);
            Graphics g = Graphics.FromImage(cropedImage);

            Rectangle rec = new Rectangle(0, 0,
                                w,
                                h);

            g.DrawImage(image, rec, x, y, w, h, GraphicsUnit.Pixel);
            image.Dispose();
            g.Dispose();

            return new ImageResult { Image = cropedImage, ImageFormat = ImageFormat.Jpeg };
        }

ImageResult? Was ist das denn?

Ich möchte am Ende einfach nur das Bild anzeigen, dabei soll das Bild nicht auf der Platte gespeichert sein. Man könnte es nun direkt in den Stream schreiben oder man nutzt eine kleine Hilfsklasse von Maarten Balliauw: Das ImageResult. Das macht die ganze Sache etwas sauberer IMHO. Natürlich kann man auch einen View oder etwas anderes zurückgeben.

ImageResult:

public class ImageResult : ActionResult
{
    public ImageResult() { }

    public Image Image { get; set; }
    public ImageFormat ImageFormat { get; set; }

    public override void ExecuteResult(ControllerContext context)
    {
        // verify properties
        if (Image == null)
        {
            throw new ArgumentNullException("Image");
        }
        if (ImageFormat == null)
        {
            throw new ArgumentNullException("ImageFormat");
        }

        // output
        context.HttpContext.Response.Clear();

        if (ImageFormat.Equals(ImageFormat.Bmp)) context.HttpContext.Response.ContentType = "image/bmp";
        if (ImageFormat.Equals(ImageFormat.Gif)) context.HttpContext.Response.ContentType = "image/gif";
        if (ImageFormat.Equals(ImageFormat.Icon)) context.HttpContext.Response.ContentType = "image/vnd.microsoft.icon";
        if (ImageFormat.Equals(ImageFormat.Jpeg)) context.HttpContext.Response.ContentType = "image/jpeg";
        if (ImageFormat.Equals(ImageFormat.Png)) context.HttpContext.Response.ContentType = "image/png";
        if (ImageFormat.Equals(ImageFormat.Tiff)) context.HttpContext.Response.ContentType = "image/tiff";
        if (ImageFormat.Equals(ImageFormat.Wmf)) context.HttpContext.Response.ContentType = "image/wmf";

        Image.Save(context.HttpContext.Response.OutputStream, ImageFormat);
    }
}

Ergebnis:

Startansicht

Einen Teil ausschneiden:

Nach dem Drücken auf “Send”:

Wenn man das nun noch mit einen fetzigen Uploader verbindet, wird das sogar richtig praktisch

[ Download Democode ]

About the author

Written by Robert Mühsig

Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.

4 Responses

1. 

   Simon Wolters

   30. November 2009

   Hi Robert,
   wirklich ein cooles Plugin, vielen Dank für den tollen Artikel.
   Wäre es damit (oder mit anderen Mitteln) auch möglich, ein Bild clientseitig vor dem Upload zu resizen?

   Reply
2. 

   Robert Mühsig

   1. December 2009

   Ich glaube nicht dass dies mit Javascript gehen würde. Flash/Silverlight wäre sicherlich eine Variante.

   Reply
3. 

   Florian

   1. December 2009

   Hey

   Toller Artikel! Genau das steht bei mir heute naemlich auf der To-Do Liste!

   Danke, wird mir sicherlich viel Zeit sparen!

   Reply