Beiträge von anonware

anonware

Moin,

nun möchte ich noch den Inhalt von tgroup (Funktion getGroup) per Ajax mit an die upload.php schicken, um den Dateinamen "test-$tgroup.png" setzen zu können.

Ich habe hierfür bereits data: { img: dataURL, tgroup : tgroup } ausprobiert, jedoch leider erfolglos.

Wie müsste das Aussehen?

Meine upload.php sieht wie folgt aus:

PHP

<?php
 
   $img = $_POST['img'];
   
   $tgroup = $_POST['tgroup'];
   
   if (strpos($img, 'data:image/png;base64') === 0) {
       
      $img = str_replace('data:image/png;base64,', '', $img);
      $img = str_replace(' ', '+', $img);
      $data = base64_decode($img);
      $file = //HIER DANN DER DATEINAME test-$_POST['tgroup'].png
   
      if (file_put_contents($file, $data)) {
         echo "Der Canvas wurde gespeichert als $file.";
      } else {
         echo 'Der Canvas konnte nicht gespeichert werden.';
      }   
     
   }
?>

Alles anzeigen

anonware

Perfekt, nun funktioniert es einwandfrei. Vielen Dank!

anonware

Hallo,

anscheinend bin ich einfach zu blöd

Also, leider passiert bei mir gar nichts beim Klick auf den Button.

Code sieht jetzt wie folgt aus:

HTML

<!DOCTYPE html>
<html>
<head>
  
<script type='text/javascript'>

function getGroup() {
return document.getElementById('tgroup').value.trim();

}

window.onload=function(){


function drawCanvas(color,c) {
    var ctx
    if (!c) {
    var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
    } else {
    ctx = c}
    
    ctx.font = '12.76px EB Garamond';
    var wit = ctx.measureText(getGroup().toUpperCase()).width
    ctx.canvas.width = 200
    
    ctx.canvas.height = 101

    ctx.font = '12.76px EB Garamond';
    ctx.globalCompositeOperation='source-over';
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillStyle = color;
    
    ctx.textAlign = 'center';
    
    ctx.fillText("Test", ctx.canvas.width/2, 75);
    ctx.fillText(getGroup().toUpperCase(), ctx.canvas.width/2, 98);
        var img=document.getElementById("NAME DER BILDDATEI");
    ctx.drawImage(img,(ctx.canvas.width-200)/2,0);
    ctx.globalCompositeOperation='source-atop';
    ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
}


document.getElementById('blue').addEventListener('click', function() {
    var format = "png";
    drawCanvas("rgb(10,48,135)");
    var canvas = document.getElementById('canvas');
                var dataURL = canvas.toDataURL();
                $.ajax({
                    type: "POST",
                    url: "upload.php",
                    data: { img: dataURL }
                }).done(function (msg) {
                    alert(msg);
                });
}
}, false);

</script>
</head>
<body>

  <canvas width="1000" height="490" id="canvas">Sorry, no canvas available</canvas>
  <div id= "content">
  <h1>Test Logo Generator</h1>
 
  <input type="text" id="tgroup" placeholder="Test"><br>
<h3>Logo:</h3>
<a href = "#" class ="button-link" id="blue">Blue</a>
  </div>
</body>

</html>

Alles anzeigen

anonware

Hallo,

ich würde gerne das per JS generierte Canvas per PHP auf dem Server in einem Verzeichnis speichern.

Code

<script type='text/javascript'>

function getGroup() {
return document.getElementById('tgroup').value.trim();

}

window.onload=function(){


function drawCanvas(color,c) {
    var ctx
    if (!c) {
    var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
    } else {
    ctx = c}
    
    ctx.font = '12.76px ...';
    var wit = ctx.measureText(getGroup().toUpperCase()).width
    ctx.canvas.width = 200
    
    ctx.canvas.height = 101

    ctx.font = '12.76px ...';
    ctx.globalCompositeOperation='source-over';
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillStyle = color;
    
    ctx.textAlign = 'center';
    
    ctx.fillText("Test", ctx.canvas.width/2, 75);
    ctx.fillText(getGroup().toUpperCase(), ctx.canvas.width/2, 98);
        var img=document.getElementById("ELSA");
    ctx.drawImage(img,(ctx.canvas.width-200)/2,0);
    ctx.globalCompositeOperation='source-atop';
    ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
}

function getFormat() {
if (document.getElementById("png").checked) {
    return "png"} else {return "jpeg"}



}

function adjust(format) {
if (format=="jpeg") {
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
ctx.fillStyle = "white";
    ctx.globalCompositeOperation='destination-atop';
    ctx.fillRect(0,0,1000,1000);}
    }

// AB HIER EXPORT IN VERZEICHNIS BEI KLICK AUF BUTTON
function() {
    var format = "png";
    drawCanvas("rgb(10,48,135)");
    document.getElementById("canvas")....
    
}, false);
} 

</script>
</head>
<body>

  <canvas width="1000" height="490" id="canvas">Sorry, no canvas available</canvas>
  <div id= "content">
  <h1>Test</h1>
 
  <input type="text" id="tgroup" placeholder="Name of Test group"><br>
<h3>Logo:</h3>
<a href = "#" class = "button-link" id="blue">Blue</a>

Alles anzeigen

Hierfür habe ich folgendes versucht

Code

document.getElementById('blue').addEventListener('click', function prepimg() {
    var format = "png";
    drawCanvas("rgb(10,48,135)");
var canvas = document.getElementById('canvas');
document.getElementById('inp_img').value = canvas.toDataURL();
}
}, false);

</script>
</head>
<body>

  <canvas width="1000" height="490" id="canvas">Sorry, no canvas available</canvas>
  <div id= "content">
  <h1>Test Generator</h1>
 
  <input type="text" id="tgroup" placeholder="Name of Test group"><br>
<h3>Logo:</h3>


<form method="post" action="upload.php" onsubmit="prepimg();">
  <input id="inp_img" name="img" type="hidden" value="">
  <input id="blue" class="button-link" type="submit" value="Upload">
</form>

Alles anzeigen

und hier einmal die upload.php

Code

define('UPLOAD_DIR', 'images/');
    $img = $_POST['img'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';

Das ganze funktioniert jedoch leider nicht.

Ich bedanke mich im Voraus für die freundlichen Hilfestellungen.

Beiträge von anonware

Canvas Datei auf Server per PHP speichern

Canvas Datei auf Server per PHP speichern

Canvas Datei auf Server per PHP speichern

Canvas Datei auf Server per PHP speichern