允许用户在图像上编写自定义文本

So what i want to do is to have my users write something in a text field and whatever they write there goes on the image so it becomes part of the image, and they can save it to their computer.

I'm going to use a field like this

<input type='text' id='Text' name='Text' maxlength="10">

this full example let's you

1.write the text you want

2.add an image

(FileReader,Canvas)needs modern browsers

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var
maxSize=600, // Max width or height of the image
font='italic small-caps bold 40px/50px arial', // font style
fontColor='white', // font color
textX=50, // text x position
textY=50, // text y position
h=function(e){
 var fr=new FileReader();
 fr.onload=function(e){
  var img=new Image();
  img.onload=function(){
   var r=maxSize/Math.max(this.width,this.height),
   w=Math.round(this.width*r),
   h=Math.round(this.height*r),
   c=document.createElement("canvas"),cc=c.getContext("2d");
   c.width=w;c.height=h;
   cc.drawImage(this,0,0,w,h);

   cc.font=font;
   cc.fillStyle=fontColor;
   cc.fillText(document.getElementById('t').value,textX,textY);

   this.src=c.toDataURL();
   document.body.appendChild(this);
  }
  img.src=e.target.result;
 }
 fr.readAsDataURL(e.target.files[0]);
}
window.onload=function(){
 document.getElementById('f').addEventListener('change',h,false);
}
</script>
</head>
<body>
1.write text
<input type="text" id="t">
2.add image
<input type="file" id="f">
</body>
</html>

You could use <canvas> and its JavaScript API:

  1. Load the image into the canvas
  2. Take the text from the input and add it to the canvas, too
  3. Take the bitmap data out of the canvas and add it to a new <img> tag using a data/uri.

Okay, so I personally haven't had to use this before, but I know that PHP has some built in functions to perform said task. Here is where you can find it. I hope it helps :)

http://php.net/manual/en/function.imagettftext.php

Okay, so after doing some more thorough research, I find this might be helpful :)

Essentially, here's the form you'd want to use:

<form action="ProcessImage.php" method="post">
<input type="file" name="im"/>
<input type="text" name="msg"/>
<button type="submit">Submit</button>

And here's the PHP code you want to use, referred to as ProcessImage.php:

<?php
// Set the content-type
header('Content-Type: image/png');

// Create the image
$im = $_POST['im'];

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The text to draw
$text = $_POST['msg'];
// Replace path by your own font path
$font = 'arial.ttf';

// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>