Canvas Datei auf Server per PHP speichern

anonware · 14. November 2017

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.

Sempervivum · 14. November 2017

So etwas habe ich vor längerer Zeit auch Mal kodiert.

Javascript:

Code

                var canvas = document.getElementById('mycanvas');
                var dataURL = canvas.toDataURL();
                $.ajax({
                    type: "POST",
                    url: "savepic.php",
                    data: { img: dataURL }
                }).done(function (msg) {
                    alert(msg);
                });

savepic.php:

PHP

<?php
 
   $img = $_POST['img'];
   
   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 = 'uploads/img'.date("YmdHis").'.png';
   
      if (file_put_contents($file, $data)) {
         echo "Der Canvas wurde gespeichert als $file.";
      } else {
         echo 'Der Canvas konnte nicht gespeichert werden.';
      }   
     
   }
?>

Alles anzeigen

Wie ich sehe, sieht dein PHP meinem sehr ähnlich, wahrscheinlich aus der selben Quelle gefischt.

anonware · 17. November 2017

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

Sempervivum · 17. November 2017

Dieses:

Code

    var img=document.getElementById("NAME DER BILDDATEI");
    ctx.drawImage(img,(ctx.canvas.width-200)/2,0);

führt zu einem Fehler, da das betr. img-Element nicht definiert ist. Ich habe es deshalb hinzu gefügt und unsichtbar gemacht.

Und dieses:

Code

ctx.globalCompositeOperation='source-atop';

verhindert anscheinend das Füllen. Ich kenne es noch nicht und habe es zunächst mal auskommentiert. Ebenso das Füllen, weil es dann alles andere überschreibt.

Dies funktioniert dann bei mir:

Code

    <canvas width="1000" height="490" id="canvas">Sorry, no canvas available</canvas>
    <img id="das-bild" src="images/dia0.jpg" />
    <style>#das-bild {display: none;}</style>
    <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>
    <script>
        window.onload = function () {
            function getGroup() {
                return document.getElementById('tgroup').value.trim();
            }
            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';

                var img = document.getElementById("das-bild");
                ctx.drawImage(img, (ctx.canvas.width - 200) / 2, 0);
                ctx.fillText("Test", ctx.canvas.width / 2, 75);
                ctx.fillText(getGroup().toUpperCase(), ctx.canvas.width / 2, 98);
                //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: "savepic.php",
                    data: { img: dataURL }
                }).done(function (msg) {
                    alert(msg);
                });
            });
        }
    </script>

Alles anzeigen

Und, soweit ich mir erinnere, muss das Upload-Verzeichnis existieren, damit das Hochladen funktioniert.

anonware · 18. November 2017

Perfekt, nun funktioniert es einwandfrei. Vielen Dank!

anonware · 22. November 2017

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

Sempervivum · 23. November 2017

Hiermit:

data: { img: dataURL, tgroup : tgroup }

übergibst du nicht den Inhalt des input-Feldes sondern das ganze DOM-Element. So sollte es funktionieren:

Code

                var canvas = document.getElementById('mycanvas');
                var dataURL = canvas.toDataURL();
                var grp = document.getElementById('tGroup').value;
                $.ajax({
                    type: "POST",
                    url: "savepic.php",
                    data: { img: dataURL, tgroup: grp }
                }).done(function (msg) {
                    alert(msg);
                });

Und mit dem PHP bist Du ja schon auf dem richtigen Wege:

Code

$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 = 'test-' . $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

Canvas Datei auf Server per PHP speichern

Jetzt mitmachen!

Teilen