Für eine Image-Gallery in in einem Community-Projekt, habe ich mir eine Lösung mit jQuery erstellt, um Bilder online zu bearbeiten.
Also hauptsächlich Resize und Cropping.
Dabei enstand als kleines Nebenprodukt eine Lösung, bei der man einen Deepzoom auf große Bitmaps machen kann.
Eine einfache Version davon habe ich hier mal online gestellt:
DeepZoom mit jQuery
Download als ASP.NET - Website
|
Das verwendete Bild auf dem Server ist 7MB groß und wird durch ein setTimeout alle 150ms aktualisiert, sofern der Ausschnitt sich geändert hat.
Realisiert ist das ganze mit jCrop das prinzipiell ein ähnliches Beispiel bereitstellt, allerdings läd der Client sich ein großes Image und es wird mittels css ein Ausschnitt gezeigt.
Mit meinem Beispiel werden die Positionen des Rahmens an den Server übermittelt und ein entsprechendes kleines Image gerenderd und zurückgegeben.
|
 |
|
Das Cropping und resizing habe ich gestern schon beschrieben.
Die Request muss ich dann nur noch auswerten und und in meine Function werfen:
|
|
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 }
Ich liebe jQuery ;-)
