skip to Main Content

I’m trying to create a form where the content I enter is printed on to an image (saving me altering it in Photoshop every time I need to modify it).

I’ve set up the form with input fields and a form, and need to now find a script that just pastes my input onto the image.

See image below for reference and my form for info:

form

2

Answers


  1. CSS method

    html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Display form input</title>
    </head>
    <body>
        <form>
            <input type="text" id="input1">
            <input type="text" id="input2">
            <input type="text" id="input3">
            <input type="text" id="input4">
        </form>
        <img src="yourimage.jpg">
        <!--You should position these elements with css above your image-->
        <p id="text1"></p>
        <p id="text2"></p>
        <p id="text3"></p>
        <p id="text4"></p>
    </body>
    </html>
    

    jquery:

    // Detect form changes
    $('form').change(function(){
        // Get value of form
        $input1 = $('#input1').val();
        $input2 = $('#input2').val();
        $input3 = $('#input3').val();
        $input4 = $('#input4').val();
    
        // Change text of placeholders to form values
        $('#text1').text($input1);
        $('#text2').text($input2);
        $('#text3').text($input3);
        $('#text4').text($input4);
    });
    

    PHP method

    html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Form to jpeg</title>
    </head>
    <body>
        <form action="toimage.php" method="GET">
            <input type="text" name="text1">
            <input type="text" name="text2">
            <input type="text" name="text3">
            <input type="text" name="text4">
            <input type="submit">
        </form>
    </body>
    </html>
    

    toimage.php:

    <?php
    // Set image type
    header('Content-type: image/jpeg');
    
    // Create image from photo
    $jpg_image = imagecreatefromjpeg('yourimage.jpg');
    
    // Set color RGB
    $white = imagecolorallocate($jpg_image, 255, 255, 255);
    
    // Path to font
    // Must be .TTF
    $font_path = 'arial.TTF';
    
    // Get input values and store in vars
    $text1 = $_GET['text1'];
    $text2 = $_GET['text2'];
    $text3 = $_GET['text3'];
    $text4 = $_GET['text4'];
    
    // imagettftext($jpg_image, text-size, text angle, x-co, y-co, color, path to font .TTF, text);
    // You will have to change the text-size, x-co and y-co so that each text item is positioned exactly at the place you want it to.
    imagettftext($jpg_image, 25, 0, 25, 50, $white, $font_path, $text1);
    imagettftext($jpg_image, 25, 0, 25, 150, $white, $font_path, $text2);
    imagettftext($jpg_image, 25, 0, 25, 250, $white, $font_path, $text3);
    imagettftext($jpg_image, 25, 0, 25, 350, $white, $font_path, $text4);
    
    // Display jpg
    imagejpeg($jpg_image);
    // Delete from memory
    imagedestroy($jpg_image);
    ?>
    
    Login or Signup to reply.
  2. You can do the whole thing completely client side, using canvas and a bit of JS.

    1. First, get your canvas and context references:

      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      
    2. Use drawImage to draw the template image into the canvas:

      var imgSource = new Image();
      imgSource.onload = function () {
          ctx.drawImage(imgSource, 0, 0);
      };
      
      //idealy the source is data uri - otherwise from the same domain,
      //or you'll encounter security errors;
      imgSource.src = 'your template image';
      
    3. Next, use fillText to add your text in the right place on the canvas:

      ctx.font = '40px Arial';
      ctx.fillStyle = "red";
      ctx.fillText(text, 10, 200); //draw text at position x=10, y=200
      
    4. Finally, use a bit of code to download the resulting image:

      var url = canvas.toDataURL('image/png');
      var anchor = document.createElement('a');
      anchor.download = 'save_me.png';
      anchor.href = url;
      anchor.click();
      

    Here’s the JSFiddle to this sample.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search