Notifikationer

Markér alle som læst Log ud

agerled Nybegynder

22. februar 2004 - 15:05 Der er 6 kommentarer og
1 løsning

croppe billede - trække firkant hen over billede

Hej.

Jeg har brug for at jeg online kan croppe billeder. Er der nogen der har et eksempel hvor man markere det på billedet man vil klippe ved at trække en firkant henover og derefter sende koordinaterne videre til min fil der behandler billedet?

Synes godt om

Slettet bruger

23. februar 2004 - 15:32 #1

Her er et ufærdigt script:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Marker billede</title>
<script type="text/javascript">
m_nede = false;

function musned() {
m_nede = !m_nede;
if (m_nede) {
obj = document.getElementById("markoer");
obj.style.width = "0px";
obj.style.height = "0px";
obj.style.left = event.clientX;
obj.style.top = event.clientY;
}
}

function bevaeg() {
if (m_nede) {
obj = document.getElementById("markoer");
obj.style.width = Math.abs(event.clientX - parseInt(obj.style.left, 10));
obj.style.height = Math.abs(event.clientY - parseInt(obj.style.top, 10));
}
}

</script>
</head>
<body>
<img src="billede.gif" style="width: 300px; height: 200px;" onclick="musned();" onmousemove="bevaeg();" />
<div id="markoer" onclick="musned();" style="position: absolute; left: -100px; top: -100px; width: 0px; height: 0px; background-color: #999999; border: 1px solid black; filter: alpha(opacity=30); -moz-opacity: 0.1"></div>
</body>
</html>

Det virker kun, når man klikker på billedet og trækker musen nedad mod højre. Hvis man trækker op mod venstre, fungerer det ikke korrekt, men jeg har ikke mere tid i dag, så enten må en anden hjælpe, eller også må du vente et par dage. :)

Synes godt om

Slettet bruger

25. februar 2004 - 20:21 #2

Så begynder det at ligne noget:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Marker billede</title>
<script type="text/javascript">
m_nede = null;

function musned() {
if (m_nede == null) {
m_nede = new Array(event.clientX, event.clientY);
obj = document.getElementById("markoer");
obj.style.width = "0px";
obj.style.height = "0px";
obj.style.left = event.clientX;
obj.style.top = event.clientY;
}
else
m_nede = null;
}

function bevaeg() {
if (m_nede) {
obj = document.getElementById("markoer");
x = event.clientX;
y = event.clientY;
if (x < m_nede[0])
obj.style.left = x;
if (y < m_nede[1])
obj.style.top = y;
obj.style.width = Math.abs(x - m_nede[0]);
obj.style.height = Math.abs(y - m_nede[1]);
}
}

</script>
</head>
<body>
<img src="billede.gif" style="width: 300px; height: 200px;" onclick="musned();" onmousemove="bevaeg();" ondragstart="return false;" />
<div id="markoer" onclick="musned();" style="position: absolute; left: -100px; top: -100px; width: 0px; height: 0px; background-color: #999999; border: 1px solid black; filter: alpha(opacity=30); -moz-opacity: 0.1"></div>
</body>
</html>

Synes godt om

Slettet bruger

25. februar 2004 - 20:35 #3

Du skal selvfølgelig også kunne sende koordinaterne videre:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Marker billede</title>
<script type="text/javascript">
m_nede = null;
koord = null;

function musned() {
if (m_nede == null) {
m_nede = new Array(event.clientX, event.clientY);
obj = document.getElementById("markoer");
obj.style.width = "0px";
obj.style.height = "0px";
obj.style.left = event.clientX;
obj.style.top = event.clientY;
}
else {
arr = getPos();
koord = new Array(m_nede[0] - arr[0], m_nede[1] - arr[1], event.clientX - arr[0], event.clientY - arr[1]);
m_nede = null;
}
}

function bevaeg() {
if (m_nede) {
obj = document.getElementById("markoer");
x = event.clientX;
y = event.clientY;
if (x < m_nede[0])
obj.style.left = x;
if (y < m_nede[1])
obj.style.top = y;
obj.style.width = Math.abs(x - m_nede[0]);
obj.style.height = Math.abs(y - m_nede[1]);
}
}

function getPos() {
obj = document.getElementById("bill");
temp = new Array(0, 0);
while (obj.parent != null) {
temp[0] += obj.offsetLeft;
temp[1] += obj.offsetTop;
obj = obj.parent;
}
return temp;
}
</script>
</head>
<body>
<img id="bill" src="billede.gif" style="width: 300px; height: 200px;" onclick="musned();" onmousemove="bevaeg();" ondragstart="return false;" /><br /><br />
<form onsubmit="if (koord != null) this.koordinater.value = koord.join(', '); else return false;">
<input type="hidden" name="koordinater" value="" />
<input type="submit" value="Send koordinater" />
</form>
<div id="markoer" onclick="musned();" style="position: absolute; left: -100px; top: -100px; width: 0px; height: 0px; background-color: #999999; border: 1px solid black; filter: alpha(opacity=30); -moz-opacity: 0.1"></div>
</body>
</html>

Synes godt om

agerled Nybegynder

25. februar 2004 - 22:23 #4

ser godt ud. Hvordan sender jeg koordinaterne videre til en anden side på denne måde?

<form ation="croppicture.asp?width="bredde"&height="højde" osv..........??

Synes godt om

Slettet bruger

07. marts 2004 - 18:03 #5

Undskyld ventetiden, men Ekspertens mailrobot er simpelthen så sløv for tiden...

I ovenstående script bliver koordinaterne sendt videre. Du skal bare aflæse variablen "koordinater", hvis format er som følger:
x1,y1,x2,y2
... hvor firkantens øverste venstre hjørne har koordinatet (x1,y1) og det nederste højre (x2,y2).

Du skal selvfølgelig også ændre formtagget, fx:

<form action="din_side.php" method="post" onsubmit="if (koord != null) this.koordinater.value = koord.join(', '); else return false;">

Synes godt om

agerled Nybegynder

08. november 2004 - 07:23 #6

lukket.

Synes godt om

Slettet bruger

08. november 2004 - 16:18 #7

Selv tak.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS