Unisci seconda casella di testo inserisci il valore del testo come nuova riga nell'immagine creata esistente

Progetto di testo stencil di lavoro ho creato il codice per convertire il testo di input per l'immagine funziona bene ma ho più caselle di testo (es.) Casella di testo1, Casella di testo2, Testo box3.Il problema è che se scrivo nella casella di testo 1 il suo testo convertito in immagine e dopo se scrivo il testo nel testo box2 o nel riquadro di testo3 converte la nuova immagine qui voglio solo creare quel testo in una nuova riga con la prima immagine convertita testo dalla casella di testo1.Unisci seconda casella di testo inserisci il valore del testo come nuova riga nell'immagine creata esistente

Link Demo: - Click Here

Bellow esempio scattare shot.here si può vedere che prima casella di testo cassa linea 1 e nella casella di testo secondo creare un'immagine in seconda o una nuova riga su una singola immagine.

different line

Bellow è il mio codice index.php

<?php ?> 

<html> 
<body> 

<img class="stencil-main" id="stencil-main" /> 
<span class="line" style="margin-left: 578px;">Enter Text-</span><input type="text" name="stencil-text" style="margin-left: 15px;" 
     onkeyup="document.getElementById('stencil-main').src='some.php?img='+this.value" /> 

     <br> 
     <img class="stencil-mains" id="stencil-mains" />  
     <span class="line" style="margin-left: 578px;">Enter Text-</span><input type="text" name="stencil-text" style="margin-left: 15px;" 
     onkeyup="document.getElementById('stencil-mains').src='some.php?img='+this.value" /> 


     </body> 
     </html>

2) Bellow è il codice php per convertire il testo in immagine some.php

<?php 
    header("Content-type: image/png"); 
$cid=$_GET['img'];  
####################### BEGIN USER EDITS ####################### 
$imagewidth = 500; 
$imageheight = 100; 
$fontsize = "20"; 
$fontangle = "0"; 
$font = "ByzantineEmpire.ttf"; 
$text = $cid ; 
$text2="sanjay"; 
$backgroundcolor = "FFFFFF"; 
$textcolor = "#000000"; 
######################## END USER EDITS ######################## 

### Convert HTML backgound color to RGB 
if(eregi("([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $backgroundcolor, $bgrgb)) 
{$bgred = hexdec($bgrgb[1]); $bggreen = hexdec($bgrgb[2]); $bgblue = hexdec($bgrgb[3]);} 

### Convert HTML text color to RGB 
if(eregi("([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $textcolor, $textrgb)) 
{$textred = hexdec($textrgb[1]); $textgreen = hexdec($textrgb[2]); $textblue = hexdec($textrgb[3]);} 

### Create image 
$im = imagecreate($imagewidth, $imageheight); 

### Declare image's background color 
$bgcolor = imagecolorallocate($im, $bgred,$bggreen,$bgblue); 

### Declare image's text color 
$fontcolor = imagecolorallocate($im, $textred,$textgreen,$textblue); 

### Get exact dimensions of text string 
$box = @imageTTFBbox($fontsize,$fontangle,$font,$text); 

### Get width of text from dimensions 
$textwidth = abs($box[4] - $box[0]); 

### Get height of text from dimensions 
$textheight = abs($box[5] - $box[1]); 

### Get x-coordinate of centered text horizontally using length of the image and length of the text 
$xcord = ($imagewidth/2)-($textwidth/2)-2; 

### Get y-coordinate of centered text vertically using height of the image and height of the text 
$ycord = ($imageheight/2)+($textheight/2); 

### Declare completed image with colors, font, text, and text location 
imagettftext ($im, $fontsize, $fontangle, $xcord, $ycord, $fontcolor, $font, $text); 

### Display completed image as PNG 
$html=imagepng($im); 


### Close the image 
imagedestroy($im); 



?>

fonte

2014-04-24 Sanjay Nakate

Ogni ingresso richiede una nuova immagine da sola. Devi indicarli nella stessa posizione. Inoltre, il tuo PHP non è impostato per gestire più input. È solo una riga di testo. Devi fare un po 'di matematica e qualche valutazione dei valori di input qua e là e voilà. –

È necessario per ottenere i valori dei campi di testo e inviarli tutti a some.php nello stesso momento, ora li stai mandando individualmente. Anche il some.php ha bisogno di ottenere entrambi e generare una singola immagine con loro. Ecco come è possibile farlo utilizzando la funzione di carico jQuery:

index.php

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 

      $('input[name="stencil-text"]').keyup(function(){ 

       var img_text = $('input[name="stencil-text"]').map(function(){ 
        return $(this).val(); 
       }).get(); 

       var img = $("<img />").attr('src', 'some.php?img=' + img_text).load(function() { 
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
         alert('broken image!'); 
        } else { 
         $("#stencil-main").html(img); 
        } 
       }); 

      }); 

     }); 
    </script> 
</head> 
<body> 
    <div id="stencil-main"></div> 
    <span class="line" style="margin-left: 578px;">Enter Text-</span> 
    <input type="text" name="stencil-text" style="margin-left: 15px;"> 

    <br> 

    <span class="line" style="margin-left: 578px;">Enter Text-</span> 
    <input type="text" name="stencil-text" style="margin-left: 15px;"> 
</body> 
</html>

Ecco jQuery ottiene tutti i valori dei campi di input, con nome "stencil-testo", è possibile aggiungere il numero di campi di input che si desidera e funzionerà allo stesso modo. L'unica cosa che devi fare è cambiare il $imageheight altrimenti l'immagine verrà ritagliata.

some.php

<?php 
header("Content-type: image/png"); 
$cid = str_replace(',', "\n", $_GET['img']); 
####################### BEGIN USER EDITS ####################### 
$imagewidth = 500; 
$imageheight = 120; 
$fontsize = "20"; 
$fontangle = "0"; 
$font = "ByzantineEmpire.ttf"; 
$text = $cid ; 
$text2="sanjay"; 
$backgroundcolor = "FFFFFF"; 
$textcolor = "#000000"; 
######################## END USER EDITS ######################## 

### Convert HTML backgound color to RGB 
if(@eregi("([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $backgroundcolor, $bgrgb)) 
{$bgred = hexdec($bgrgb[1]); $bggreen = hexdec($bgrgb[2]); $bgblue = hexdec($bgrgb[3]);} 

### Convert HTML text color to RGB 
if(@eregi("([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $textcolor, $textrgb)) 
{$textred = hexdec($textrgb[1]); $textgreen = hexdec($textrgb[2]); $textblue = hexdec($textrgb[3]);} 

### Create image 
$im = imagecreate($imagewidth, $imageheight); 

### Declare image's background color 
$bgcolor = imagecolorallocate($im, $bgred,$bggreen,$bgblue); 

### Declare image's text color 
$fontcolor = imagecolorallocate($im, $textred,$textgreen,$textblue); 

### Get exact dimensions of text string 
$box = imageTTFBbox($fontsize,$fontangle,$font,$text); 

### Get width of text from dimensions 
$textwidth = abs($box[4] - $box[0]); 

### Get height of text from dimensions 
$textheight = abs($box[5] - $box[1]); 

### Get x-coordinate of centered text horizontally using length of the image and length of the text 
$xcord = ($imagewidth/2)-($textwidth/2)-2; 

### Get y-coordinate of centered text vertically using height of the image and height of the text 
$ycord = ($imageheight/2)+($textheight/2); 

### Declare completed image with colors, font, text, and text location 
imagettftext ($im, $fontsize, $fontangle, $xcord, $ycord, $fontcolor, $font, $text); 

### Display completed image as PNG 
$html=imagepng($im); 


### Close the image 
imagedestroy($im); 

?>

fonte

2014-05-02 22:17:29

great answer manolis +1 –

soluzione completa per convertire immagini di testo e modificare il carattere del testo riga per riga

demo Link: - Click Here

1) Creare index.php con codice a soffietto

<?php 

?> 

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $('input[name="stencil-text"]').keyup(function(){ 

       var img_text = $('input[name="stencil-text"]').map(function(){ 

        return $(this).val(); 
       }).get(); 

       var fontsize = $('input[name="stencil-text-size"]').map(function(){ 
        return $(this).val(); 
       }).get(); 

       var img = $("<img />").attr('src', 'some.php?img=' + img_text+'&fontsize='+fontsize).load(function() { 
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
         alert('broken image!'); 
        } else { 
         //alert(fontsize); 
         $("#stencil-main").html(img); 
        } 
       });  

      }); 
       $('input[name="stencil-text-size"]').keyup(function(){ 

       var img_text = $('input[name="stencil-text"]').map(function(){ 

        return $(this).val(); 
       }).get(); 

       var fontsize = $('input[name="stencil-text-size"]').map(function(){ 
        return $(this).val(); 
       }).get(); 


       var img = $("<img />").attr('src', 'some.php?img=' + img_text+'&fontsize='+fontsize).load(function() { 
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
         alert('broken image!'); 
        } else { 
         //alert(fontsize); 
         $("#stencil-main").html(img); 
        } 
       }); 








      });  




     }); 
    </script> 
</head> 
<body> 

     <div id ="all"> 

    <div id="box" style="margin-left: 360px;"> 
    <span class="line" style="margin-left: 578px;">FONT SIZE LINE1 -</span> 
    <input type="text" name="stencil-text-size" value="100" style="margin-left: 15px;"> 



    <span class="line" style="margin-left: 578px;">LINE 1-</span> 
    <input type="text" name="stencil-text" style="margin-left: 15px;"> 


    <br> 

    <span class="line" style="margin-left: 578px;">FONT SIZE LINE2 -</span> 
    <input type="text" name="stencil-text-size" value="50" style="margin-left: 15px;"> 

    <span class="line" style="margin-left: 578px;">LINE 2-</span> 
    <input type="text" name="stencil-text" style="margin-left: 15px;"> 

    <br> 

     <span class="line" style="margin-left: 578px;">FONT SIZE LINE3 -</span> 
    <input type="text" name="stencil-text-size" value="20" style="margin-left: 15px;"> 
    <span class="line" style="margin-left: 578px;">LINE 3-</span> 
    <input type="text" name="stencil-text" style="margin-left: 15px;"> 
     </div> 
     <div id="stencil-main" style="margin-top: -652px;margin-left:-297px"></div> 
     </div> 

</body> 
</html>

2) Creare some.php con il codice di muggito

<?php 
    header("Content-type: image/png"); 
$myArray = explode(',', $_GET['img']); 
$fontarray = explode(',' , $_GET['fontsize']); 

####################### BEGIN USER EDITS ####################### 
$imagewidth = 1000; 
$imageheight = 1000; 
$fontangle = "0"; 
$font = "ByzantineEmpire.ttf"; 
$backgroundcolor = "FFFFFF"; 
$textcolor = "#000000"; 
######################## END USER EDITS ######################## 

### Convert HTML backgound color to RGB 
if(@eregi("([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $backgroundcolor, $bgrgb)) 
{$bgred = hexdec($bgrgb[1]); $bggreen = hexdec($bgrgb[2]); $bgblue = hexdec($bgrgb[3]);} 

### Convert HTML text color to RGB 
if(@eregi("([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $textcolor, $textrgb)) 
{$textred = hexdec($textrgb[1]); $textgreen = hexdec($textrgb[2]); $textblue = hexdec($textrgb[3]);} 

### Create image 
$im = imagecreate($imagewidth, $imageheight); 

### Declare image's background color 
$bgcolor = imagecolorallocate($im, $bgred,$bggreen,$bgblue); 

### Declare image's text color 
$fontcolor = imagecolorallocate($im, $textred,$textgreen,$textblue); 

### Get exact dimensions of text string 


### Declare completed image with colors, font, text, and text location  
$count=count($myArray); 
    $box = imageTTFBbox(50,$fontangle,$font,'test'); 

### Get width of text from dimensions 
$textwidth = abs($box[4] - $box[0]); 

### Get height of text from dimensions 
$textheight = abs($box[5] - $box[1]); 

### Get x-coordinate of centered text horizontally using length of the image and length of the text 
$xcord = ($imagewidth/2)-($textwidth/2)-2; 

### Get y-coordinate of centered text vertically using height of the image and height of the text 
$ycord = ($imageheight/2)+($textheight/2); 
for($i=0;$i<$count;$i++) 
{ 
     $newcount=count($fontarray); 

     for($j=0;$j<$newcount;$j++) 

{ 

    if($j==$i) 
    { 
    $xcord=$xcord+2; 
    $ycord=$ycord+100; 
    imagettftext ($im, $fontarray[$j], $fontangle, $xcord, $ycord, $fontcolor, $font, $myArray[$i]); 

} 

} 

} 

$html=imagepng($im); 

### Close the image 
imagedestroy($im); 

?>

otterrete come campione muggito snap shot mettere fuori dopo eseguire il codice

out put

fonte

2014-05-09 04:36:13

Unisci seconda casella di testo inserisci il valore del testo come nuova riga nell'immagine creata esistente

risposta

Problemi correlati