Question

所以我想做的是让我的用户在文本字段中写一些内容，无论他们在那里写什么内容都会在图像上显示，因此它成为图像的一部分，并且可以将其保存到计算机中。

我打算使用像这样的字段

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

Answer 1

您可以使用<canvas>及其JavaScript API：

将图像加载到画布
从输入中获取文本并将其添加到画布
将位图数据从画布中取出，并使用data / uri将其添加到新的<img>标记中。

Answer 2

好的，所以我个人以前不必使用它，但我知道PHP有一些内置函数来执行所述任务。您可以在这里找到它。我希望它有所帮助：）

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

好的，经过一些更深入的研究后，我发现这可能会有所帮助：）

基本上，这是你想要使用的表格：

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

这是您要使用的PHP代码，称为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);
?>

Answer 3

这个完整的例子让你

1.写下你想要的文字

2.添加图片

（FileReader，Canvas）需要现代浏览器

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

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

3 个答案: