For an image-gallery in a community-project, i developed a solution, to crop and resize images online.

As a byproduct I found out, how I can mak a deepzoom with jQuery and jCrop.

You can try a simple version of it here: working Example deepZoom with jQuery

Download the complete ASP.NET - Website-Project

The used image on the server is more then 7MB

I described yesterday the Cropping und resizing which I used as the base image functions.

     7   img = Image.FromFile(Server.MapPath("test.png"))

    8         Dim h0 = CInt(Request("h0"))

    9         Dim w0 = CInt(Request("w0"))

   10 

   11         Dim faktorW = img.Width / w0

   12         Dim faktorH = img.Height / h0

   13 

   14 

   15 

   16 

   17         Dim X1 As Integer = CInt(Request("x1")) * faktorW

   18         Dim Y1 As Integer = CInt(Request("y1")) * faktorH

   19         Dim X2 As Integer = CInt(Request("x2")) * faktorW

   20         Dim Y2 As Integer = CInt(Request("y2")) * faktorH

   21 

   22         Dim targetWidth = 150

   23         Dim targetHeight = 200

   24 

   25 

   26 

   27         Response.ContentType = "image/jpg"

   28         Response.StatusCode = 200

   29         Dim img1 = cropAndResizeImage(img, _

   30                                     targetWidth, _

   31                                     targetHeight, _

   32                                     X1, _

   33                                     Y1, _

   34                                     X2, _

   35                                     Y2, _

   36                                     Imaging.ImageFormat.Jpeg)

   37         Response.BinaryWrite(img1.ToArray)

   38 

   39         Response.End()

 


 

 

Auch der Javascript Code ist überschaubar:

    7       var(api = null)

    8                 $(window).load(function() { initCrop() });

    9                 function initCrop() {

   10 

   11                     api = $.Jcrop('#rootImage', {

   12                         aspectRatio: .75,

   13                         minSize: [25, 0],

   14                         onChange: createPreview,

   15                         onSelect: createPreview()

   16                     });

   17 

   26                 }

   27 

   28                 function createPreview(c) {

   29                     previewUrl = 'zImages.aspx?t=1'

   30                                 + '&w0=' + $('#rootImage').width()

   31                                 + '&h0=' + $('#rootImage').height()

   32                                 + '&x1=' + c.x + '&y1=' + c.y + '&x2=' + c.x2

   33                                 + '&y2=' + c.y2 + '&w=' + c.w + '&h=' + c.h

   34                 }

   35 

   36                 var previewUrl = 'trans.gif'

   37                 var previewUrlLast = ''

   38                 var aktiv = window.setTimeout("updatePreview()", 50);

   39 

   40                 function updatePreview() {

   41                     if (previewUrl != previewUrlLast) {

   42             previewUrlLast = previewUrl

   43                         $('#previewImage').attr('src', previewUrl);

   44                     }

   45                     //Timer nicht zu kurz setzen!!

   46                     aktiv = window.setTimeout("updatePreview()", 150);

   47                 }    

 

 I love jQuery ;-)

 

 kick it on dotnet-kicks.de