Adapt text to container in image with PHP

Question

Adapt text to container in image with PHP

Navigation

#1 by (3 votes)

0

I have an image that I want to write on with php (editing the image), the text varies, but the area in the image where I want to write does not, so if the text is short I want the size of the typography be bigger. Can this be done? If possible, how? Thanks !!!

php

asked by Patricio 29.08.2017 в 04:59

source

1 answer

what is the int opc for? in c ++? [closed] Exceptions in Java

score 3 · Accepted Answer

Try this alternative although it is easier to do it with javascript.

<body>
    <div>
        <?php 
            $text = "Imagenes";
            $font = '';

            if(strlen($text)<=10) $font = 'font-size:30px';
            else $font = 'font-size:20px';
        ?>
        <span style="<?php echo $font ?>"> <?php echo $text?> </span>
    </div>
    <img src="http://i.imgur.com/FEEJC4Ps.png" alt="no image"/>     
</body>

Edited

With reasons to improve the answer, I based myself on the answer given by another user in stackoverflow where you manipulate images using GD, it occurred to me to do something similar but instead of harking both the text and the font size yourself you can configure those attributes from your html view .

For this we use a php file that will create and customize the image using GD through values that are sent by GET.

<?php

//default value
$fontsize = 20;
$text = "Value by defect";

if(isset($_GET['fontsize'])){
    $fontsize = $_GET['fontsize']; 
}

if(isset($_GET['text'])){
    $text = $_GET['text'];
}

putenv('GDFONTPATH=' . realpath('.'));
//Set the Content Type
//header('Content-type: image/jpeg');

// Create Image From Existing File
$jpg_image = imagecreatefromjpeg('sunset.jpg');

// Allocate A Color For The Text
$white = imagecolorallocate($jpg_image, 255, 255, 255);

// Set Path to Font File
$font_path = 'OpenSans-Italic.ttf';

// Print Text On Image
imagettftext($jpg_image, $fontsize, 0, 30, 50, $white, $font_path, $text);

// Send Image to Browser
imagejpeg($jpg_image);

// Clear Memory
imagedestroy($jpg_image);
?>

Finally our view where we will shape our image and we can configure both the text and its size.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <?php
        $fontsize = 25;
        $text = "Stackoverflow";

        if(strlen($text)<=10){
            $size = 40;
        }
    ?>
    <img src="createImage.php?fontsize=<?php echo $fontsize?>&text=<?php echo $text?>" alt="">

</body>
</html>

Second Edition

Very well based on the comments that you mention that you want to change the text in a dynamic way, I suggested you do it using javascript and from there send the file createImage.php

Well first, the html view would remain this way where the js code would embed it, which would change the image

<body>

   <div class="setting-image">
        <label for="imagetext">Titulo de la imagen</label> <br/>
        <input type="text"  id="imagetext" name="imagetext"/>
        <input type="button" value="asginar mensaje" onclick="generateText()" />
   </div>


   <br/>
   <div class="image">
        <img  id="default-image" src="createImage.php" alt="noimage"  onclik="generateText()">
   </div>

  <!--Cargamos el javascript-->
   <script>
      function generateText(){
        var currentText = document.getElementById("imagetext").value;
        var textLen = currentText.length;
        var imgchanged = document.getElementById("default-image");

        if(textLen>0){

          var fontsize = 40;
          if(textLen>10) fontsize = 30;
          if(textLen>20) fontsize = 20;

          imgchanged.src = 'createImage.php?fontsize='+fontsize+'&text='+currentText;
      }
      else imgchanged.src = 'createImage.php?';
    }
  </script>

</body>

Example