Avatar billede carstenandersen Nybegynder
21. oktober 2011 - 11:33 Der er 5 kommentarer og
1 løsning

Gemme billede ved Dhtml crop

Hej eksperter

Jeg søgt længe efter mulighed for crop af billede med asp kode (hvor brugeren kan flytte crop-området), og endelig har jeg fundet denne http://www.dhtmlgoodies.com/index.html?whichScript=dg-crop. Er helt perfekt, men kan ikke se, hvordan det "croppede-billede" gemmes?

Håber virkelig, at I kan hjælpe ! På forhånd tak.
Avatar billede olebole Juniormester
21. oktober 2011 - 17:33 #1
<ole>

Dit link: "The page you requested does not exist."

/mvh
</bole>
Avatar billede olebole Juniormester
21. oktober 2011 - 17:36 #2
aahhhh ... det var et punktum i slutningen af linket, der drillede  =)

Du må vel kunne hive koordinaterne ud og sende dem til din server, som så resizer billedet med det serversprog og billedbehandlingsmodul, der er installeret.
Avatar billede olebole Juniormester
21. oktober 2011 - 17:40 #3
Du har jo allerede fire felter med koordinater, bredde og højde. Det er vel bare at lægge dem ind i en form, som kan skydes af mod serveren(?)
Avatar billede carstenandersen Nybegynder
22. oktober 2011 - 11:45 #4
Jeg tror, at du har fat i det rigtige. Jeg har været inde på http://www.aspjpeg.com/manual_04.html#4_3, som umiddelbart er asp koden til crop. Mit spørgsmål er nu, hvordan snakker de 2 sider sammen? Altså hvordan ser formen ud, som skal sendes med kordinater til siden, som cropper? Håber, at du forstår ;-)
Avatar billede carstenandersen Nybegynder
24. oktober 2011 - 06:29 #5
Har fundet løsningen :-)

Hvis andre skulle være interesseret:

1) Downloadede alt fra http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

2) Brugte deres script til at få vist kordinater (har indsat værdierne i en form):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <title>Loading &amp; displaying co-ordinates of crop area on attachment test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js" type="text/javascript"></script>
    <script src="/cropper.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        // setup the callback function
        function onEndCrop( coords, dimensions ) {
            $( 'x1' ).value = coords.x1;
            $( 'y1' ).value = coords.y1;
            $( 'x2' ).value = coords.x2;
            $( 'y2' ).value = coords.y2;
            $( 'width' ).value = dimensions.width;
            $( 'height' ).value = dimensions.height;
        }
       
        // basic example
        Event.observe(
            window,
            'load',
            function() {
                new Cropper.Img(
                    'testImage',
                    {
                        onEndCrop: onEndCrop,
                        displayOnInit: true,
                        onloadCoords: { x1: 65, y1: 287, x2: 935, y2: 462 }
                    }
                )
            }
        );
    </script>
    <style type="text/css">
        label {
            clear: left;
            margin-left: 50px;
            float: left;
            width: 5em;
        }
       
        html, body {
            margin: 0;
        }
       
        #testWrap {
            margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
        }
    </style>
</head>
<body>
    <h2>Loading &amp; displaying co-ordinates of crop area on attachment test</h2>
    <p>
        Some test content before the image
    </p>
   
    <div id="testWrap">
        <img src="/upload/DSC01408.jpg" alt="test image" id="testImage" width="1000" height="750" />
    </div>
   
    <form  method="POST" action= "crop4-data.asp">
    <p>
        <label for="x1">x1:</label>
        <input type="text" name="x1" id="x1" />
    </p>
    <p>
        <label for="y1">y1:</label>
        <input type="text" name="y1" id="y1" />
    </p>
    <p>
        <label for="x2">x2:</label>
        <input type="text" name="x2" id="x2" />
    </p>
    <p>
        <label for="y2">y2:</label>
        <input type="text" name="y2" id="y2" />
    </p>
    <p>
        <label for="width">width:</label>
        <input type="text" name="width" id="width" />
    </p>
    <p>
        <label for="height">height</label>
        <input type="text" name="height" id="height" />
    </p>
    <input type="submit" value="Beskær billede" name="B1" style="font-family: Verdana; font-size: 10 pt">       
    </form>
   
</body>
</html>

Koden til crop4-data.asp er:

<%

x = Request.form("x1")
y = Request.form("y1")
x1 = Request.form("x2")
y1 = Request.form("y2")

' Create instance of AspJpeg
Set Jpeg = Server.CreateObject("Persits.Jpeg")
Jpeg.Open(Server.MapPath("/upload/DSC01408.jpg"))
   
' Compute path to source image
'Path = Server.MapPath("/upload/DSC01408.jpg")

' Open source image
'Jpeg.Open Path

' Find højde og bredde
Jpeg.Width = Jpeg.OriginalWidth
Jpeg.Height = Jpeg.OriginalHeight

Jpeg.Crop X, Y, X1, Y1
Jpeg.Quality = 100
Jpeg.SendBinary

Jpeg.Save Server.MapPath("/upload/DSC01408kopi.jpg")

%>

olebole, smid et svar, og du får 100 point som tak for hjælpen.
Avatar billede carstenandersen Nybegynder
07. november 2011 - 08:43 #6
Lukker spg ;-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester