如何将 PHP gd 创建的图像放入现有图像顶部的 canvas

Question

我正在尝试在网站上创建一个功能，允许用户使用 javascript 上传 png 图像，然后在那个地方的顶部使用 PHP gd 具有透明的新 png 图像圆圈，这样下面的图像就会显示出来。然后我希望使用 imagecopymerge 函数将它们合并在一起。如果这一切都可以使用 AJAX 完成，而不需要将用户图片或 PHP gd 图像保存到数据库中，那就太好了。然后，用户需要能够将新完成的组合图像保存到他们的帐户中。

我遇到的主要问题是如何让 PHP gd 图像显示到图片所在的 canvas 或任何其他 canvas。

主页

<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

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

Answer 1

从你的问题（虽然它不在你的标签中）我推测你的意思是你正在使用 html5 canvas.

网上有几篇文章概述了如何使用 php 上传到 HTML5 canvas 以及您可以根据需要调整的示例代码。 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（您提到的）提供的代码示例非常简单：

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

希望您在调整本文中的代码时能取得一些成功，这会对您有所帮助。祝你好运。

如何将 PHP gd 创建的图像放入现有图像顶部的 canvas

How to put a PHP gd created image into a canvas over the top of an existing image

javascript

php

php-gd

html5-canvas