Photoshop Question posted in
The official user guide can be found here.

Place content from form directly on to an image – Photoshop

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

Tags:

2

Answers


  1. 0

    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. 0

    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