Hochgeladene Bilder bearbeiten / Javascript - Experte

einfachcoden · 4. Januar 2015, 23:02

Hallo!

kann hier jemand bitte kurz helfen, der von Javascript versteht...
und zwar geht es um:
fancyproductdesigner.com/produ…er/?start_customizing=yes

Habe das Plugin erworben und möchte,wenn jemand ein Bild hochlädt,das Bild als Kreis haben oder ein "border: 5px.." etc. hinzufügen - also mittels css das Bild aufpeppen. Ich dachte ich suche in den .js Dateien nach der entsprechenden stelle und füge mein css-befehl ein. Finde aber die richtige stelle nicht bzw. weiß nicht mal wo die ist. Mit Firebug kann ich das hochgeladene Bild auch gar nicht anklicken.

Vielen Dank schonmal!

Arno · 5. Januar 2015, 00:07

Mooin und willkommen auf easy-coding.de

Wenn ich das richtig sehe, benutzt das Plugin mehrere Canvas für die Darstellung des Bildes. Damit wird es mit CSS warscheinlich nichts. Hast du die Render-Funktion zur Hand oder die entsprechende Datei?

Edit: Ich sehe gerade, dass das Plugin Fabric.js verwendet. Ich glaube am betsen wäre es, das Bild beim Upload abzufangen und dort zu bearbeiten. Kann derzeit aber nur die komprimierte Datei aufrufen und beautifyen, wodurch ich nicht wirklich durchblick.

einfachcoden · 5. Januar 2015, 00:36

Hi Arno...vielen Dank fürs nachschauen. Was meinst du mit "Render-Funktion" ? Und welche Datei würde dir weiterhelfen?

Arno · 5. Januar 2015, 00:39

Eine unkomprimierte jquery.fancyProductDesigner.js.

Mit Render-Funktion, meine ich die Funktion, die das ganze darstellt bzw. auf den/die/das Canvas zeichnet.

einfachcoden · 5. Januar 2015, 00:41

bitte herunterladen, dann lösche ich sie gleich. Ich weiß nicht sie unkomprimiert ist.

Arno · 5. Januar 2015, 00:43

Wunderbar, ist genau die Richtige.

Einfach 5px border-radius auf jedes Bild, das hochgeladen wird anwenden?

einfachcoden · 5. Januar 2015, 00:43

Ja, zum Beispiel. Wenn du mir sagst, wo man das machen kann wäre es klasse.

Arno · 5. Januar 2015, 00:51

In Zeile 618 fängt die Funktion für das Uploaden von Bildern an. Eine Möglichkeit wäre nach Zeile 634 (image.onload = function() { ...) auf eine unsichtbare Canvas die Form zu zeichnen, die du am Ende haben möchtest. Danach per Clip die Canvas auf den Bereich der Form beschränken und dann das hochgeladene Bild darauf zeichnen. Am Schluss einfach image.src gleich dem base64-Wert der Canvas setzen.

einfachcoden · 5. Januar 2015, 00:53

kannst du das auch für ganz bekloppte leute erklären

ich hatte immer "<img src=" gesucht und style="... hinzugefügt und probert. Mit .js habe ich noch nie zu tun gehabt.

Arno · 5. Januar 2015, 00:54

Wie gut sind denn deien JS-Kenntnisse?

einfachcoden · 5. Januar 2015, 00:54

0%

einfachcoden · 5. Januar 2015, 11:15

ist das viel aufwand? Hab einiges ausprobiert ohne erfolg leider

Arno · 5. Januar 2015, 12:23

'n bisschen. Ich werd bis heute Abend versuchen, was entsprechendes zu schreiben, das du einfach einsetzen kannst.

einfachcoden · 5. Januar 2015, 12:46

danke! Also nur einfache Kreise aus den Bilder.

Arno · 6. Januar 2015, 01:05

Die entsprechende Funktion ist fertig. Für alle, die es interessiert: jsfiddle.net/1z8hmtxb/3/

@einfachcoden Ich schick dir die Datei per PN zu.

einfachcoden · 13. Januar 2015, 21:40

Hallo,

kann hier jemand für Arno einspringen?Langsam fang ich schon an Javascript zu lernen um das Problem zu lösen, aber bis ich eine Lösung finde kann es sich um Jahre handeln. Arno hat im moment wenig Zeit und es ist grad dringend.

Viele Grüße
einfachcoden

PS: Relevant soll die addElement() Methode sein - die Bilder werden damit hinzugefügt. Und da wird fabric.js als HTML5 verwendet.
Das sind Infos,die ich anderweitig noch bekommen habe

einfachcoden · 17. Januar 2015, 14:59

niemand da ?

s1ckST4R · 22. Januar 2015, 18:56

Hallo, habe dein Problem hoffentlich damit gelöst.

Ich hoffe das ist ok für Arno aber da der code ja freigestellt ist...

Quellcode

$(document).ready(function() {
var img = new Image;
var canvas = $('# ID MEINER CANVAS ');
var context = canvas[0].getContext('2d');
var width, height, canvasDimension;
img.onload = function() {
// Get width of the image
width = this.width;
height = this.height;
// set canvas to the right size
canvasDimension = width < height ? width : height;
$(canvas).attr('width', canvasDimension).attr('height', height);
// draw circle for clip
context.beginPath();
context.arc(canvasDimension / 2, canvasDimension / 2, canvasDimension / 2, 0, 2 * Math.PI, false);
context.fillStyle = 'rgba(0, 0, 0, 0)';
context.fill();
// clip
context.clip();
var xOffset = (width - canvasDimension) / 2;
var yOffset = (height - canvasDimension) / 2;
// draw image to the canvas
context.drawImage(
img, // image
xOffset,
yOffset,
width - xOffset,
height - yOffset,
0,
0,
canvasDimension,
canvasDimension
);
};
img.src = 'http://bluewheelmedia.com/wp-content/uploads/2013/03/PandavsPenguin.jpg';
});

Alles anzeigen

Das in eine .js Datei, diese per:

Quellcode

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="#########meineJSDatei.js#############"></script>

Benötig jQuery deswegen Zeile 1 und "src" durch den Pfad deiner Datei ersetzen.

In der js Datei ganz unten:
img.src = 'http://bluewheelmedia.com/wp-content/uploads/2013/03/PandavsPenguin.jpg'; (Default)

wird ersetzt durch den Pfad deines Bildes welches Angezeigt werden soll.

Jetzt nurnoch in der HTML Datei ein Canvas erstellen mit beliebiger ID, die dann in Zeile 2 js Datei angepasst werden muss.

Mfg s1ck

einfachcoden · 23. Januar 2015, 15:47

danke vielmals, du hast ne pn!

Es ging darum das in dem Plugin einzufügen und da hatten wir schwierigkeiten. Habe dir die relevante Javascript-Datei zugeschickt.

VG

s1ckST4R · 27. Januar 2015, 21:18

Hoy,

so könnte es funktionieren...

Quellcode

context.beginPath();
context.arc(imageW / 2, imageH / 2, imageH / 2, 0, 2 * Math.PI, false);
context.fillStyle = 'rgba(0, 0, 0, 0)';
context.fill();
context.clip();

In Zeile 693 rum ist eine else mit "alert('FileReader API is not supported in your browser, please use Firefox, Safari, Chrome or IE10!');"
bevor diese else ausgelöst wird musst du den code da einfügen,

und noch in Zeile 634 vor image.onload:

Quellcode

var context = canvas.getContext('2d');

Quellcode

Quellcode

Quellcode

Quellcode

Teilen