Question

我正在尝试创建一个表单，我输入的内容会打印到图像上（每次我需要修改它时，我都会在Photoshop中修改它。）

我已经使用输入字段和表单设置了表单，现在需要找到一个只将我的输入粘贴到图像上的脚本。

请参阅下面的图片以获取参考信息和我的信息表格：

form

Answer 1

CSS方法

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方法

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);
?>

Answer 2

你可以使用canvas和一些JS来完成整个客户端。

首先，获取画布和上下文引用：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

使用drawImage将模板图像绘制到画布中：

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';

接下来，使用fillText将您的文字添加到画布上的正确位置：

ctx.font = '40px Arial';
ctx.fillStyle = "red";
ctx.fillText(text, 10, 200); //draw text at position x=10, y=200

最后，使用一些代码下载生成的图像：

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

以下是此示例的JSFiddle。

将表单中的内容直接放在图像上

2 个答案: