0

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

3 回答 3

0

这个完整的例子让你

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>
于 2013-07-10T07:24:51.863 回答
0

好的，所以我个人以前不必使用它，但我知道 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);
?>
于 2013-07-10T07:09:56.647 回答
0

你可以使用<canvas>它的 JavaScript API：

  1. 将图像加载到画布中
  2. 从输入中获取文本并将其也添加到画布中
  3. 将位图数据从画布中取出，并<img>使用 data/uri 将其添加到新标签中。
于 2013-07-10T07:08:39.983 回答