既存の画像の上部にキャンバスにPHP gdで作成した画像を配置する方法

JavaScriptを使用してpng画像をアップロードした後、その場所の上にaを挿入する機能をウェブサイトに作成しようとしています。透明な円を持つPHP gdを使った新しいpngimage。下の画像が表示されます。うまくいけば、imagecopymerge関数を使ってそれらを一緒にマージします。ユーザの画像やPHPのgdイメージをデータベースに保存しなくても、AJAXを使ってこれをすべて行うことができれば幸いです。ユーザーは、新しい仕上がりの合成画像をアカウントに保存できる必要があります。既存の画像の上部にキャンバスにPHP gdで作成した画像を配置する方法

私が抱えている主な問題は、画像がキャンバス上に表示されるか、または他のキャンバスに表示されるようにPHP gdイメージを取得する方法です。

メインページ

<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>

あなたの質問から

<?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); 
?>

出典

2017-07-21 Moff

あなたはこの記事を読んでいましたか？https://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server –

私は助けてくれると幸せでした。ようこそstackoverflow ..（楽しい時間！..笑） –

私は私のサイトhttp://rachelgallen.com/upload.txtのルートに私自身のupload.php（テキストファイルとして）を置く - 私はイメージの名前を変更アップロードする。見て、それは参考になるかもしれません。 –

画像を作成するためのPHP（それはあなたのタグではありませんが）私は、あなたが使用している意味推測html5 canvas。

HTML5キャンバスにアップロードする方法の概要を示す記事がいくつかありますが、必要に応じてサンプルコードを使用してPHPを使用します。 This article by Desmond Shawはかなり良いです

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>

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.'; 
?>

php.netサイト上で（あなたが言及したこと）imagecopymergeために与えられたコードサンプル十分に簡単です：

うまくいけば、あなたは記事の中でコードを順応させることができ、これがあなたを助けてくれることでしょう。運が良かった。

出典

2017-07-21 10:57:09

David Walshにも非常に簡単な記事があります。https://davidwalsh.name/convert-canvas-image –

あなたの返信に感謝します。これは非常に参考になりました。できるかどうかを明確にできるかどうか疑問に思っていましたPHP gdを使用してイメージを作成し、最初にイメージをデータベースまたはフォルダに保存せずに、AJAXを使用してそのイメージをHTML5キャンバスに配置します。 – Moff

この記事では、イメージはサーバー上のフォルダに保存されます。私はこのステップをバイパスすることはできないと思います。あなたがどこかに保存する必要があるように、特にあなたがイメージを変更してマージする必要がある場合。遅く返事を申し訳ありません、オフラインでした。現在コンピュータを再起動していて、電話しています。ノートパソコンのトラブル！ –

既存の画像の上部にキャンバスにPHP gdで作成した画像を配置する方法

答えて

関連する問題