Create image from text using form and save to serv

2019-07-29 13:32发布

问题:

I am trying to use a php function on my page to create an image from a text input. But nothing seems to be happening. This is my current code -

Php -

$to = $paths. '/card.png';

if (isset($_POST['make_pic'])) {
$text = $_POST['txt_input'];
$im = imagecreate(200, 80);

// White background and blue text
$bg = imagecolorallocate($im, 255, 255, 255);
$textcolor = imagecolorallocate($im, 0, 0, 255);

imagestring($im, 4, 30, 25, $text, $textcolor);

ob_start();
imagepng($im);
$data = ob_get_clean();
file_put_contents($to,$data);
imagedestroy($im);
}

HTML -

<form name="picform" id="picform" action="" method="post" enctype="multipart/form-data">
<input type="text" class="input-field" name="txt_input" maxlength="50">
<input type="submit" id="make_pic" name="make_pic" value="Convert">
</form>

The form doesn't have a action cause I'm using ajax -

$("#make_pic").click(function() {
    $('#picform').ajaxForm();
});

UPDATE

I am trying to get one image placed on top of the image I created, thus creating one final image. This is my current code, which works for creating the image but not placing the overlay image ---

$paths = "/uploads/". $current_user->ID."/".$v_Id;
$assets = "/uploads/assets";

$to = $paths. '/contact_card.png';

// Text from form to be used
$c_name1 = $_POST['c_name'];
$c_biz1 = $_POST['c_biz'];
$c_num = $_POST['c_num'];
$c_mail1 = $_POST['c_email'];

$c_name = strtoupper($c_name1);
$c_biz = strtoupper($c_biz1);
$c_mail = strtoupper($c_mail1);


$headliner = "Contact Info\r\n";

$text = $headliner."\r\n".$c_name."\r\n".$c_biz."\r\n".$c_num."\r\n".$c_mail;

$im = imagecreate(1280, 720);
$im2 = $paths. '/profile_pic.png';

// Black background
$bg = imagecolorallocate($im, 0, 0, 0);

// Text Colors
$black = imagecolorallocate($im, 0, 0, 0);
$grey = imagecolorallocate($im, 128, 128, 128);
$white = imagecolorallocate($im, 255, 255, 255);

// Font text options
$font = $assets.'/fonts/PlayfairDisplay-Regular.ttf';
$font_size = 24;
$angle = 45;

// Get image Width and Height
$image_width = imagesx($im);  
$image_height = imagesy($im);

// Get Bounding Box Size
$text_box = imagettfbbox($font_size,$angle,$font,$text);

// Get your Text Width and Height
$text_width = $text_box[2]-$text_box[0];
$text_height = $text_box[7]-$text_box[1];

// Calculate coordinates of the text
$x = 440;
$y = 260;

// Add the text
imagettftext($im, $font_size, 0, $x, $y, $white, $font, $text);

// HERE I AM TRYING TO PLACE A PICTURE LEFT CENTERED ON TOP OF THE OTHER PICTURE
imagecopymerge($im, $im2, 0, 0, 0, 0, 50, 50, 100);


// Create the image and save to server
ob_start();
imagepng($im);
$data = ob_get_clean();
file_put_contents($to,$data);
imagedestroy($im);

回答1:

The PHP part actually works for me, though this could be replaced:

ob_start();
imagepng($im);
$data = ob_get_clean();
file_put_contents($to,$data);
imagedestroy($im);

with this:

imagepng($im, $to);
imagedestroy($im);

But I'm not positive if that's the issue, since your existing code worked for me. So try checking if the $paths is a valid directory?

UPDATE

nothing seems to be happening

Could it be because you didn't echo (or output something) after the image is created? Well I mean, the image may have been successfully (re-)created, but your PHP/JS script doesn't "tell" you of the status; hence you see "nothing". Try echo-ing something like this:

if (isset($_POST['make_pic'])) {
  ...
  imagedestroy($im);

  echo 'Success!';
}

And then use this JS:

$('#picform').ajaxForm({
  success: function(res){
    alert(res);
  }
});

(Update #2: I intentionally removed the "Additional Note" part, but you can always see the answer's revisions to find that part.)