nicht angemeldet
Bilder drehen und speichern
0 0 
JürgenB
0 0 0 0 
Matthias Apsel
0
Bilder drehen und speichern
Guten Tag,
nach dem Upload hat der User die Möglichkeit sein Bild zu drehen, dieses erreiche wie derzeit so:
<body>
<img id="img" src="UX1saD-r.jpeg"><br/><br/>
<button id="drehen1">Drehen 90 </button>
<button id="drehen2">Drehen 180</button>
<button id="drehen3">Drehen 270</button>
<button id="drehen4">Drehen 360</button>
</body>
Das dazugehörige JavaScript lautet so
$(document).ready(function() {
$('#drehen1').click(function(e){
$('#img').css('transform', 'rotate(90deg)');
});
$('#drehen2').click(function(e){
$('#img').css('transform', 'rotate(180deg)');
});
$('#drehen3').click(function(e){
$('#img').css('transform', 'rotate(270deg)');
});
$('#drehen4').click(function(e){
$('#img').css('transform', 'rotate(360deg)');
});
});
klappt soweit auch wunderbar. Hier eine Live Version http://jsfiddle.net/jywptyp4/ nur die Frage ist nun, wie kann dieses gedreht Bild gespeichert werden? Habt Ihr eine Idee? Wenn der JS Code besser erstellt werden könnte, bin ich auch hier für jeden Tipp Dankbar!
-
nach dem Upload hat der User die Möglichkeit sein Bild zu drehen
$('#drehen1').click(function(e){
$('#img').css('transform', 'rotate(90deg)');
});wie kann dieses gedrehte Bild gespeichert werden?
-
Hallo Lukas,
ich glaube, so wird das nichts, da du ja nur die Ansicht drehst, nicht aber das Bild.
Ich würde das Bild in ein Canvas-Element laden und dort rotieren. Danach kannst du den Bildinhalt per dataUrl in ein IMG-Element kopieren und den Besucher mit der rechten Maustaste speichern lassen.
Auf meiner Testseite fehlt der Schritt mit dataUrl, aber du kannst ja mal mit der rechten Maustaste auf die Bilder klicken.
Gruß, Jürgen
-
Hallo,
Ich würde das Bild in ein Canvas-Element laden und dort rotieren. Danach kannst du den Bildinhalt per dataUrl in ein IMG-Element kopieren und den Besucher mit der rechten Maustaste speichern lassen.
Es geht ja nicht darum dass ich das Bild mit rechter Maustaste speichern lassen möchte sondern es geht darum der User lädt ein Bild hoch, merkt dann scheiße steht z.B. auf dem Kopf, kann es sich dann zurecht drehen, auf speichern klicken und die Sache ist erledigt
-
Om nah hoo pez nyeetz, Lukas!
Es geht ja nicht darum dass ich das Bild mit rechter Maustaste speichern lassen möchte sondern es geht darum der User lädt ein Bild hoch, merkt dann scheiße steht z.B. auf dem Kopf, kann es sich dann zurecht drehen, auf speichern klicken und die Sache ist erledigt
Du drehst aber nicht das Bild sondern nur die Ansicht des Bildes.
Matthias
-
Hallo Lukas,
Es geht ja nicht darum dass ich das Bild mit rechter Maustaste speichern lassen möchte sondern es geht darum der User lädt ein Bild hoch, merkt dann scheiße steht z.B. auf dem Kopf, kann es sich dann zurecht drehen, auf speichern klicken und die Sache ist erledigt
ok, das habe ich falsch verstanden. Ich sehe da zwei Wege:
Du lädst das Bild in den Browser und zeigst es da auch an, dann drehst du es bei Bedarf und lädst es danach hoch.
Du lädst das Bild hoch und zeigst es (danach?) an. Dann drehst du es evtl. wie gezeigt und sendest einen Befehl an der Server, damit es dort gedreht wird.
Da ich von serverseitiger Programmierung fast keine Ahnung habe, kann ich dir zu den Details keine Hilfe mehr geben,
Gruß, Jürgen
-
-
-
hi,
nach dem Upload hat der User die Möglichkeit sein Bild zu drehen,
Besser vor dem Upload, danke JürgenB.
MfG
-
Hallo,
<button id="drehen4">Drehen 360</button>
diese Option finde ich persönlich am Interessantesten. Tut der Browser dabei eigentlich was, oder weiß er, dass er sich da bequem zurücklehnen kann?
Gruß
Kalk-
Hallo,
diese Option finde ich persönlich am Interessantesten. Tut der Browser dabei eigentlich was, oder weiß er, dass er sich da bequem zurücklehnen kann?
hättest du dir mein Live Beispiel angesehen könntest du dir diese Frage selber beantworten. Hauptsache etwas motzen?
-
Om nah hoo pez nyeetz, Lukas!
diese Option finde ich persönlich am Interessantesten. Tut der Browser dabei eigentlich was, oder weiß er, dass er sich da bequem zurücklehnen kann?
hättest du dir mein Live Beispiel angesehen könntest du dir diese Frage selber beantworten. Hauptsache etwas motzen?
So gemotzt ist das garnicht. Du solltest vielleicht den Button „drehen 0“ nennen.
Matthias
-
hi,
So gemotzt ist das garnicht. Du solltest vielleicht den Button „drehen 0“ nennen.
Na wenn schon Button, dann „Nicht drehen“ nennen.
SCNR ;)
-
Om nah hoo pez nyeetz, hotti!
So gemotzt ist das garnicht. Du solltest vielleicht den Button „drehen 0“ nennen.
Na wenn schon Button, dann „Nicht drehen“ nennen.hättest du dir sein Live-Beispiel angesehen, …
Hauptsache, etwas motzen? ;-)Matthias
-
-
-
Hallo,
hättest du dir mein Live Beispiel angesehen könntest du dir diese Frage selber beantworten.
Ok, überredet. Habs mir angeschaut. Frage ist beantwortet.
Hauptsache etwas motzen?
Wenn ich auf [Drehen 90] klicken, dreht dein Programm das Bild. Klicke ich nochmal drauf, passiert nix. Ich glaub der Button ist kaputt :P
Gruß
Kalk
-
-
