User sollen ihre selbsterstellten Logos einreichen können

Dove · 20. Juli 2017 um 00:11

Hey allerseits
Ich hoffe, ich bin hier richtig, falls nicht bitte entschuldigt ich habe mich gerade erst angemeldet
Nun folgendes, ich besitze eine kleine online Community und möchte ein kleines Tool einbauen womit die User ihr eigenes Logo zeichnen(bereits geschafft) und dieses dann aber auch abschicken können (an meine E-Mail, damit ich die Logos, die schlussendlich genommen werden aussuchen kann).
Ich bin leider kein PHP/HTML/CSS Profi, darum weiss ich nicht so richtig wie ich denn das ganze nun so verbinde damit die User das abschicken können und es erstmal einfach nur bei mir landet.

So sieht der Code bisher aus:
<!doctype html>

Badge Creator

Ich hoffe jemand kann mir helfen

snwflake · 20. Juli 2017 um 15:53

In deinem Post fehlt eine Frage.

Dove · 20. Juli 2017 um 18:01

Naja, eig. ist das ganze Geschriebene bereits die Frage… Also ich dachte das erschließt sich daraus sorry.
Ich habe keine Ahnung wie ich das ganze nun so verbinde, damit die User ihr kreiertes Logo einsenden können, bevor jetzt jemand schreibt “also sollen wir das für dich machen?” Nein sollt ihr nicht, der wichtigste Teil des Logo Creators steht ja auch bereits&funktioniert.
Es geht einfach nur darum, dass da schlussendlich ganz easy so ein Button ist auf dem “absenden” (oder ähnliches) steht, wobei das Logo, welches in dem genannten Creator erstellt wurde an mich gesendet wird (am besten wäre dafür E-Mail dachte ich) .
Meine Frage ist einfach nur wie mache ich das?
Ist klar was ich meine oder?

snwflake · 20. Juli 2017 um 18:27

Du konvertierst das canvas auf dem gezeichnet wird irgenwie in ein image (musst du wissen wie es geht, konnte die lib nicht finden). Dann nimmst du das image, schickst es per AJAX request an dein backend und laesst es irgendwo in einem gesonderten ordner mit aussage kraeftigem namen via php speichern.

Per email schicken lassen macht mMn keinen Sinn, du muesstest das image sowieso vom front-end an dein back-end schicken, entsprechend kann es php auch direkt irgendwo hinspeichern, statt dir per mail zu schicken.

Benoetigte funktionen:

Dove · 20. Juli 2017 um 19:34

Erstmal vielen Dank für die ultra schnelle Antwort
Ich hab jetzt noch etwas rumgegoogelt, allerdings blicke da einfach nicht ganz durch
Gibt es evtl. noch irgendeinen anderen Weg? Oder evtl. ein Tutorial in dem ungefähr erklärt wird wie ich wo was tun muss?
Ich kriege gerade nichtmal das Umkonvertieren zum Image hin
Tut mir mega Leid, ich stehe gerade leider noch am Anfang meiner Computersprachen Künste…
Ah noch eine kleine Frage zum Thema per E-Mail, ich dachte es sei besser, da die User ja ansonsten den Ordner auf dem Server in dem die Bilder gespeichert werden mit ihren Logos/Bildern fluten könnten, was ja ziemlich unpraktisch wäre, da wäre es mir lieber wenns dann nur ein E-Mail Postfach ist was dann halt geflutet werden würde. Oder sehe ich das falsch?

snwflake · 20. Juli 2017 um 20:33

How to convert canvas to image
How to send image data to php

Ich wuerde mir keine gedanken um den upload ordner machen. Die Bilder sollten nicht gross sein; zumindest wenn sie optimiert gespeichert werden.
Ansonsten benutzte halt einfach mail() oder swiftmailer.

Dove · 21. Juli 2017 um 01:42

Oh Gott vielen vielen Dank, das klingt für mich schon verständlicher, ich werde gleich morgen mein Glück erneut versuchen, sollte ich wieder scheitern, ist es hoffentlich okay, wenn ich mich nochmals melde

snwflake · 21. Juli 2017 um 02:02

Gott hat damit definitiv nichts zutun.
Solltest du weiterhin Probleme haben, stell praezise fragen.

Dove · 21. Juli 2017 um 22:21

Ach ich bin doch nur sehr erleichtert darüber, dass man mir versucht zu helfen
Ich komme mir etwas doof vor, also ich versuche gerade die ganze Zeit das Script für die Umkonvertierung Canvas zu Image in die PHP Datei zu kriegen.
Ich habe <script type="text/javascript" src="image.js"></script> zwischen die Header-Tags gesetzt (möchte das Script lieber ausserhalb der PHP Datei haben) und in image.js befindet sich natürlich das Script für die Umkonvertierung :
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL(“image/png”);
return image;
}

Allerdings muss das Script ja noch irgendwie im Body abgerufen werden oder? Hab einiges versucht aber ständig traten wieder Fehler auf (wobei ich mir aber auch 100%tig sicher bin, dass ich da irgendwas falsch gemacht habe), wie kann ich das denn abrufen? und wo ungefähr? Uff… Freu mich schon auf die AJAX Geschichte…

icatch · 22. Juli 2017 um 15:57

Hi dove,

das Script kannst du einfach im body-Tag aufrufen, z.B. vor dem “</body>”-Tag mit:

 <script type="text/javascript">
  var myCanvas='.....';
  convertCanvasToImage(myCanvas);
 </script>
 </body>
</html>

Zu beachten ist, das dass inline JavaScript nach der Zeile “<script type="text/javascript" src="image.js"></script>” aufgerufen werden muss.

Dove · 22. Juli 2017 um 18:03

Hallo icatch, danke für die Antwort
Ich bin mir nur bisschen unsicher ob’s vor oder nach <canvas id="badge-creator" width="420" height="420"></canvas> kommen muss oder ob’s überhaupt ne Rolle spielt?
Entschuldigung, ich möchte mir einfach sicher sein

icatch · 22. Juli 2017 um 18:42

Also wenn du einen “sauberern” HTML Code haben willst, dann sollten Scripte oder Styles eigentlich immer ausgelagert werden.
Wenn du wie in diesem Fall das Script expliziet im HTML hinterlegen willst, sollte der HTML Aufbau ca so sein (banale Struktur):

<!doctype html>
<html lang="de"
 <head>
  <!-- Meta Daten -->
  <meta-tags>
  <link rel="stylesheet" href="myCssFile.css" type="text/css">
  <script src="myJSfile.js" type="text/javascript"></script>
 </head>
 <body>
   <!-- HTML-Start -->
   <div class="testDiv-Class">
    mein HTML-Content
   </div>
   <canvas> [...] oder anderer HTML Code
  <!-- HTML-Ende -->
  <!-- OPTIONAL -->
  <script src="myJSfile.js" type="text/javascript"></script>
  <script type="text/javascript">
   alert('myJScode-Inline');
  </script>
  <!-- OPTIONAL ende -->
 </body>
</html>

snwflake · 22. Juli 2017 um 19:06

Nur um verwirrung vorzubeugen: JS files werden entweder im head gelinkt oder unmittelbar vor body closure.
Ich vermute mal @icatch ist das bewusst, allerdings hat er den dateinamen des myJSfile nicht geaendert.

Dove · 22. Juli 2017 um 19:25

Ehrlich gesagt verwirrt mich das Ganze sowieso ziemlich… Ich habs da nun so stehen:

    <title>Badge Creator</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/badge-creator.css">
<title>Dokument mit externem JavaScript</title>
<script type="text/javascript" src="image.js"></script>


  </head>
  <body>
<div id="contentBox" >

    <div class="wrapper" style="margin-right:650px; margin-top:-0px;">
      <ul class="toolbar">
        <li id="pencil" class="active">
          <i class="fa fa-pencil" aria-hidden="true"></i>
        </li>
        <li id="eraser">
          <i class="fa fa-eraser" aria-hidden="true"></i>
        </li>
        <li id="delete">
          <i class="fa fa-trash" aria-hidden="true"></i>
        </li>
      </ul>


      <canvas id="badge-creator" width="420" height="420"></canvas>
	  
 
      <table id="color-palette">
	
        <tbody>
          <?php require 'color-palette.php'; ?>
        </tbody>
      </table>
	 
    </div>

	
 </div> 
	  <script type="text/javascript">
  var myCanvas='.....';
  convertCanvasToImage(myCanvas);
 </script>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/badge-creator.js"></script>
  </body>
</html>

Stimmt so oder? Ich hab mir diese Ajax Sache nochmal angeschaut und nahm von hier: Link den snwflake mal schickte

Ich habs mit dem letzten Beispiel versucht, es hat auch geklappt leider wars da dann nur so dass die User dann zwar einen Upload Button haben allerdings müssten sie das Logo erst runterladen auf ihren Desktop und da dann auf hochladen bzw Datei auswählen. Ich weiss, dass ich wahrscheinlich den Code bei dem “It works” steht hätte nehmen sollen, allerdings habe ich da wieder das Problem dass ich nicht genau weiss wie bei mir einfügen… Hilfe?

Und nochmals vielen Dank euch beiden für die bisherige Hilfe

snwflake · 22. Juli 2017 um 20:01

Der post den ich verlinkt habe, bezog sich auf das senden von form data ueber ajax. Habe erst hinterher festgestellt das du das ja ueberhaupt nicht benutzten kannst.

// get element with jquery selector
var canvas = $('#badge-creator');
// create base64 ref for the image
var dataURL = canvas[0].toDataURL();

// send data to script
$.ajax({
    type: "POST",
    url: "relative/path/to/phpscript.php",
    data: {
        img: dataURL
    }
});

Dann fehlt nurnoch die payload entsprechend zu modifizieren und den base64 string zu decoden.
phpscript.php

// get payload
$img = $_POST['img'];
// modify payload to receive plain base64 string
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);

// decode base64 string
$fileData = base64_decode($img);

// generate unique filename
$fileName = uniqid();

// save file
file_put_contents("path/to/upload/folder" . $fileName, $fileData);

// or send via email
//require mailer
require_once('path/to/class.phpmailer.php');

// init mailer
$mailer = new PHPMailer();
$mailer->setFrom('some@mail.wtf', 'some name');
$mailer->addAddress('your@email.wtf');

$mailer->Subject = 'Some subject';
$mailer->Body = 'Eyyyy, new picture';

// add file as attachment
$mailer->addAttachment('path/to/image/' . $fileName);

if(!$mailer->send())
    echo 'Message not sent: ' . $mailer->ErrorInfo;
else
    echo 'done';

Ich habe in dem fall PHPMailer genommen, da ich dir nicht zumuten wollte dich jetzt erst noch mit composer rumaergern zu muessen. Composer ist ein package managing system fuer php und essentiell wenn du dich weiter fuer die entwicklung mit php entscheidest.

Das PHPMailer projekt findest du hier
und die class.phpmailer.php findest du hier

Dove · 23. Juli 2017 um 01:28

Ahh okay, bitte entschuldige die frage, wie genau muss ich das alles in meinem Code einbinden?
Also könnte ich das beim ersten Teil wieder so machen, dass ich zwischen den Head-Tag<script type="text/javascript" src="canvas.js"></script> reinschreibe das Script in die canvas.js packe, und dann im Body:
< script type=“text/javascript”>
var myCanvas=’…’;
was kommt hier rein?..(myCanvas);
</script> ?

Der zweite Teil ist mir klar, phpscript.php Datei erstellen den Code rein, natürlich noch die Mail etc. anpassen und muss dann noch etwas in die badgecreator.php, schon oder? Und noch zum PHPMailer, müssen die Sachen vom ersten Link alle in meine htdocs oder wie?
Uff… ich hoffe du bist nicht verägert, ist mir wirklich auch unangenehm soviele Fragen zu stellen, nochmals vielen vielen vielen Dank, dass du mir hilfst!

snwflake · 23. Juli 2017 um 10:33

Dein projekt ist effektiv winzig…~~entsprechend wuerde ich (vorrausgesetzt du planst nicht irgendwas grosses draus zu machen) alles komplett inline schreiben und bis auf den badge-creator keine extra javascript files anzulegen~~
Beim wiederholten lesen habe ich festgestellt, dass ich einem neuling nicht gleich schrott beibringe!
(grundsaetzlich gilt: das ist bad practice, ~~aber wie gesagt: dein projekt ist winzig~~ EGAL!).

Also machen wir das direkt ordentlich…
Deine Struktur:

htdocs
│   index.php    
│
└───src
│   │   color-palette.php
│   │   image.php
│   │   class.phpmailer.php
│   
└───css
│   │   mycss.css
│   
└───js
    │   badge-creator.js
    │   canvas.js

Pfade entsprechend anpassen!

color-palette.php:
Keine ahnung was du da drin stehen hast, brauchst du aber auch nicht mehr anfassen (ausser pfade)

image.php:
Der code den ich gepostet habe.

_class.phpmailer.php:
Brauchst nicht anfasse.

mycss.css:
Saemtliches css. Alles aus deinem html code rausschmeissen, das sieht nicht nur schaebig aus, man kommt auch sehr einfach durcheinander und wundert sich warum css ploetzlich wunderliche dinge tut (oder gar nichts mehr). Anschliessend im html head als stylesheet einbinden.

badge-creator.js:
siehe color-palette.php

canvas.js:
den javascript code den ich gepostet habe. Das ganze evtl. noch in ein $('#someButton').click(...) wrappen, damit es nur auf button click ausgefuehrt wird (google term: jquery button click event) das ganze dann vor dem body close () einbinden.

Das brauchst nicht mehr. Das war fuer den fall das noch ein abstraction layer hinzukommt. Mein kompletter javascript code sind 13 zeilen (mit leerzeilen und kommentaren), da brauch es nicht noch eine wrapper funktion drum herum.

Falls noch was ist, melden.

snwflake · 23. Juli 2017 um 14:13

Nach meinem mittagsschlaefchen hatte ich verdaechtig gute laune und habe dir einfach mal das projekt komplett zusammengebaut.

Einige sachen habe ich abgeaendert, dennoch soll das nur als absoluter notfall fungieren, falls du ueberhaupt nicht weiter kommst. Ueberhaupt nicht weiterkommen heisst MINIMUM eine stunde lang googlen. Dann kannst du einen blick darein werfen: https://gitlab.com/snwflake/webdev-basic

im vendor ordner liegt das komplette phpmailer projekt, weil ich es nicht geschafft habe mails ohne smtp zum laufen zu bekommen. aber ob da jetzt nur ein file liegt, oder das ganze repo macht keinen unterschied.

Ausserdem weiss ich nicht was in deinem color-palette.php und badge-creator.js steht. deshalb habe ich mir fix selbst nen canvas gemalt. aber der grundgedanke ist der selbe.