Comment mettre une image PHP gd créée dans un canevas par-dessus une image existante

J'essaie de créer une fonctionnalité sur un site Web qui permet à un utilisateur de télécharger une image png en utilisant javascript, puis en haut de ce new pngimage utilisant PHP gd qui a des cercles transparents pour que l'image ci-dessous apparaisse bien. J'utiliserai alors la fonction imagecopymerge pour les fusionner ensemble. Ce serait génial si tout cela pouvait être fait en utilisant AJAX, sans l'utilisation de sauver l'image des utilisateurs ou l'image PHP gd dans une base de données. L'utilisateur devra alors être en mesure de sauvegarder la nouvelle image combinée terminée sur son compte.Comment mettre une image PHP gd créée dans un canevas par-dessus une image existante

Le problème principal que j'ai est de savoir comment obtenir l'image PHP gd à afficher sur le canevas que l'image est sur ou toute autre toile.

La page principale

<div class= "box2">  
<form enctype="multipart/form-data"> 
<h4>Step 1: Select an image to upload</h4> 
<div class= "canvas"> 
<input type="file" id="imageLoader" name="imageLoader"/> 
<br> 
<canvas id="imageCanvas"></canvas> 
<script> 
var imageLoader = document.getElementById('imageLoader'); 
    imageLoader.addEventListener('change', handleImage, false); 
var canvas = document.getElementById('imageCanvas'); 
var ctx = canvas.getContext('2d'); 
function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.onload = function(){ 
      canvas.width = img.width; 
      canvas.height = img.height; 
      ctx.drawImage(img,0,0); 
     } 
     img.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
} 
</script> 
</form> 
</div>  
<script> 
$("document").ready(function(){ 
    $(".stuff3").submit(function() { 
     event.preventDefault(); 
     $.post("stuff3.php", $(".stuff3").serialize() , function(data){ 
      $("#imageCanvas").html(data); 
     }); 
    }); 
}); 
</script>  
<form action= "stuff3.php" method= "post"> 
<h4>Step 2: Choose a Size</h4> 
    <input type="number" placeholder="Height" name="height" min="1" max="10" step="1" /> 
    <input type="number" placeholder="Width" name="width" min="1" max="12" step="1" /> 
<button id="loginbutton" type="submit" value="Submit"> Create Size</button> 
</form>  
</div>

Le PHP pour créer l'image

<?php 
    $h= $_POST['height']; 
    $w= $_POST['width'];  
    header('Content-type: image/png'); 
    $png_image = imagecreate(100*$w, 100*$h); 
    $grey = imagecolorallocate($png_image, 245, 245, 245); 
    $im = imagecreatetruecolor(55, 30); 
    $green = imagecolorallocate($png_image, 255, 255, 255); 
    imagecolortransparent($im, $green);  
    imagefilltoborder($png_image, 0, 0, $grey, $grey); 
    $x=50; 
    $y=50; 
    $i; 
    $j; 
    for ($j=0;$j<=$h-1;$j++){ 
     for ($i=0;$i<=$w;$i++) { 
      imagefilledellipse ($png_image, $x, $y, 75, 75, $green);  // circle 
      $x+=100; 
     } 
     $x=50; 
     $y+=100; 
    } 
    imagepng($png_image); 
    imagedestroy($png_image); 
?>

Source

2017-07-21 Moff

avez-vous lu cet article https://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server –

heureux je pourrais aider. Bienvenue sur stackoverflow .. (heures d'amusement! .. lol) –

J'ai mis mon propre upload.php (sous forme de fichier texte) à la racine de mon site http://rachelgallen.com/upload.txt - je renomme les images sur télécharger. Jetez un coup d'oeil, cela peut être utile. –

De votre question (bien que ce n'est pas dans vos balises) Je suppose que vous voulez dire que vous utilisez html5 canvas.

Il ya quelques articles en ligne qui décrivent comment télécharger sur le canevas HTML5 en utilisant php avec un exemple de code que vous pouvez adapter à vos besoins. This article by Desmond Shaw est assez bonne

échantillon Upload.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Upload Canvas Data to PHP Server</title> 
    </head> 
    <body> 
     <h1>Upload Canvas Data to PHP Server</h1> 
     <canvas width="80" height="80" id="canvas">canvas</canvas> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var canvas = document.getElementById("canvas"); 
       var context = canvas.getContext("2d"); 
       context.rect(0, 0, 80, 80); 
       context.fillStyle = 'yellow'; 
       context.fill(); 
      } 
     </script> 

     <div> 
      <input type="button" onclick="uploadEx()" value="Upload" /> 
     </div> 

     <form method="post" accept-charset="utf-8" name="form1"> 
      <input name="hidden_data" id='hidden_data' type="hidden"/> 
     </form> 

     <script> 
      function uploadEx() { 
       var canvas = document.getElementById("canvas"); 
       var dataURL = canvas.toDataURL("image/png"); 
       document.getElementById('hidden_data').value = dataURL; 
       var fd = new FormData(document.forms["form1"]); 

       var xhr = new XMLHttpRequest(); 
       xhr.open('POST', 'upload_data.php', true); 

       xhr.upload.onprogress = function(e) { 
        if (e.lengthComputable) { 
         var percentComplete = (e.loaded/e.total) * 100; 
         console.log(percentComplete + '% uploaded'); 
         alert('Succesfully uploaded'); 
        } 
       }; 

       xhr.onload = function() { 

       }; 
       xhr.send(fd); 
      }; 
     </script> 
    </body> 
</html>

échantillon upload_data.php:

<?php 
$upload_dir = "upload/"; 
$img = $_POST['hidden_data']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = $upload_dir . mktime() . ".png"; 
$success = file_put_contents($file, $data); 
print $success ? $file : 'Unable to save the file.'; 
?>

L'exemple de code donné pour imagecopymerge (que vous avez mentionné) sur le site php.net est assez simple:

<?php 
// Create image instances 
$dest = imagecreatefromgif('php.gif'); //you would use imagecreatefrompng 
$src = imagecreatefromgif('php.gif'); 

// Copy and merge 
imagecopymerge($dest, $src, 10, 10, 0, 0, 100, 47, 75); 
//parameters: dest image, src image, x-co-ord of dest, y coord of dest, x-co-ord of src, y coord of src, src w, src h, merge % transparency 


// Output and free from memory 
header('Content-Type: image/gif'); 
imagegif($dest); 

imagedestroy($dest); 
imagedestroy($src); 
?>

J'espère que vous aurez du succès en adaptant le code dans l'article, et que cela vous aidera. Bonne chance.

Source

2017-07-21 10:57:09

David Walsh a un article assez simple à ce sujet aussi https://davidwalsh.name/convert-canvas-image –

Salut merci pour votre réponse tout cela est très utile, je me demandais si vous pourriez préciser s'il est possible de créer une image en utilisant PHP gd et ensuite mettre cette image dans un canevas HTML5 en utilisant AJAX sans d'abord enregistrer l'image dans une base de données ou un dossier. – Moff

Dans l'article, l'image est enregistrée dans un dossier sur le serveur. Je ne pense pas que cette étape peut être contournée. Comme si tu devais l'enregistrer quelque part, surtout si tu as besoin de modifier et de fusionner l'image. Désolé pour la réponse tardive, était hors ligne. Je suis en train de redémarrer l'ordinateur et je suis au téléphone. Problème d'ordinateur portable! –

Comment mettre une image PHP gd créée dans un canevas par-dessus une image existante

Répondre

Questions connexes