0

だから私がやりたいのは、ユーザーにテキストフィールドに何かを書いてもらい、そこに書いたものはすべて画像に表示されるので、画像の一部になり、コンピューターに保存できるようにすることです.

このようなフィールドを使用するつもりです

<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

<canvas>とその JavaScript API を使用できます。

  1. キャンバスに画像を読み込む
  2. 入力からテキストを取得し、キャンバスにも追加します
  3. <img>キャンバスからビットマップ データを取り出し、data/uri を使用して新しいタグに追加します。
于 2013-07-10T07:08:39.983 に答える
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>

ProcessImage.php と呼ばれる、使用する 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 に答える