0

I am trying to write a script where users will be able to type text on the form and those texts will be printed on image.
I have done this with PHP, and here is my PHP code:

<?php
    $user = $_POST["user"];
    $imageSource = "cake.jpg";
    $makeImage = $_POST["user"] . ".jpg";

    $image = imagecreatefromjpeg($imageSource);

    $font = "sans.ttf";
    $color = imagecolorallocate($image, 0,0,0);

    $x = 100;
    $y = 200;

    $destination = "upload/".$makeImage;


    imagettftext ($image, 100,0,$x,$y, $color, $font, $user);

    imagejpeg($image, 'upload/'. $makeImage);
?>

  1. How do I refresh the existing image of the page with the new one created by my PHP script? I have heard, it's done by ajax. If someone can write the code, I will appreciate it very much.

  2. How do I keep the same PHP code and adjust the text position for different images on the webpage? I think this one is also done in Ajax.

Federico Grandi
  • 6,785
  • 5
  • 30
  • 50
zoheb Ansari
  • 9
  • 2
  • With an AJAX request in the background, you would still have to transform the image data you receive into a Data URI or Blob URL to get them displayed. If it is not an absolute necessity to use POST, I would switch to GET parameters - then you can simply switch out an image on the client side, by assigning a new URL containing different parameter values to the image element’s `src` attribute. – 04FS Feb 15 '19 at 08:01
  • Ad 2., pass x and y as parameters to the script as well, instead of using static values set directly in the code. – 04FS Feb 15 '19 at 08:01
  • PHP? have you tried to do it in the UI and than eventually send the CANVAS image to server? Better UX I think: https://stackoverflow.com/a/15875915/383904 – Roko C. Buljan Feb 15 '19 at 10:19
  • @RokoC.Buljan - are you suggesting ( and I'm not disagreeing here ) that the end result would be better to draw directly to the canvas and then send the datauri to the server? – Professor Abronsius Feb 15 '19 at 10:28
  • Doing it with Canvas is fine, and I have done this as well. However, Canvas creates trouble for iOS users, but works fine on Computer and Android. Another issue with Canvas is that I am unable to rotate text. If I rotate text, the whole canvas gets rotate. – zoheb Ansari Feb 15 '19 at 10:40
  • The things what I want to achieve is something like this where user will type name and gets printed on the image (skip the image uploading part): https://namebirthdaycakes.com/Write-Name-On-Beautiful-Birthday-Wish/208 , but I don't want to open a new page. The image should get updated right on the same page replacing the current image if possible. – zoheb Ansari Feb 15 '19 at 10:41
  • @RamRaider yes. I like to see straight-away in the UI what I'm building, not afterwards when I already messed up :D - PHP can than always parse the base64 string or te imageData and convert to whatever format is needed. - and save to folder. – Roko C. Buljan Feb 15 '19 at 11:06
  • Rotating text has nothing to do with canvas. If you want to rotate a text in canvas you need to build such UI. The text should be an inmemory object, and the transformations will be applied to that object and painted to the canvas on framerate request. – Roko C. Buljan Feb 15 '19 at 11:07
  • @RokoC.Buljan - I made a demo which uses PHP to write the text to the image rather than using methods associated with the canvas and it works on each key press perfectly well but I always find the text overlay abilities in PHP / gdimage are never that refined. So using the canvas methods `fillText` etc and then sending the canvas to PHP to perhaps save the image or whatever might yield better end results?? – Professor Abronsius Feb 15 '19 at 11:21
  • Exactly. See the demo link I posted above. Instead of keeping the server constantly busy by building temporary images for every user keystroke (imagine having thousands of online users simultaneously) - you should make an "offline-alike" app. And send the image only on SAVE. All you need is the base64 `canvas.toDataURL()`. PHP can than `base64_decode()` (eventually do some compression if needed) and save. https://stackoverflow.com/a/31128229/383904 – Roko C. Buljan Feb 15 '19 at 11:28
  • Makes sense.. It's as easy to make the app that way as the other I guess. – Professor Abronsius Feb 15 '19 at 12:04

0 Answers0