Create an image with dynamic text overlay and send by email

Asked

Viewed 1,348 times

1

I needed to create a system that allows me to have 2 or 3 images to choose and in these images it is possible to insert a text written by the user and that can be sent by email with the image in the body of the email.

Something like this: https://paginas.fe.up.pt/~natal/postais2015/postal1.html

Does anyone know any tutorial or give me some light on how to do it?

php jquery wordpress jquery-plugins wordpress-plugin

  • You want to send only one image by email or you have the option to send an html by mounting image and text?

  • Can be an html mounting image and text.

2 answers

1


Do so, I put adjust in front of the commands you should adjust in your case:

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    if(isset($_POST['texto'], $_POST['imagem'], $_POST['email'])) {
        $jpg_image = imagecreatefromjpeg($_POST['imagem']); // criar imagem
        $fontColor = imagecolorallocate($jpg_image, 255, 255, 255); // cor do texto
        $font_path = './cour.ttf'; // Ajustar, tipo de fonte, neste caso está na mesma pasta deste script
        $text = $_POST['texto'];

        imagettftext($jpg_image, 25, 0, 0, 30, $fontColor, $font_path, $text); // posição/tamanho do texto
        $file = md5(time()). '.jpg'; // nome do ficheiro
        imagejpeg($jpg_image, 'imgsTests/' .$file); // Ajustar, pasta destino
        $imgSaved = 'http://migueldvl.com/heya/imgsTests/' .$file; // Ajustar path absoluto para imagem

        $message = '<html><body><img src="' .$imgSaved. '"></body></html>'; // Ajustar mensagem
        $headers = "From: " . strip_tags($_POST['email']) . "\r\n"; // Ajustar
        $headers .= "Reply-To: ". strip_tags($_POST['email']) . "\r\n"; // Ajustar
        $headers .= "CC: [email protected]\r\n"; // Ajustar
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html; charset=UTF-8\r\n";
        mail($_POST['email'], 'My Subject', $message, $headers); // Ajustar, subject
        echo 'Imagem Enviada:<br><img src="' .$imgSaved. '">';
        imagedestroy($jpg_image);
    }
    else {
        echo 'Faltam dados';
    }
    die();
}
?>
<form method="POST">
    <input type="email" name="email" placeholder="email"><br>
    <input type="text" name="texto" placeholder="texto">
    <select name="imagem">
        <option value="https://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg">Image1</option>
        <option value="http://www.personal.psu.edu/jul229/mini.jpg">Image2</option>
        <option value="https://oss.adm.ntu.edu.sg/jays0001/wp-content/uploads/sites/38/2015/09/betterbusiness_jpg.jpg">Image3</option>
    </select>
    <input type="submit">
</form>

  • This is what I need, but is there any way to define it.Will the text appear? because in each image I will need to have the text in a different position in the image. but I thank you already because there has been some light ;)

  • @Orangemechanical has how to define the text yes~in line imagettftext..., put down a link to test. fill in with your email and see. Obgado

0

To do the insertion of text you can do easily with JS.
It would look something like this: 

            $(function(){
                $('#provider').keyup(function(){
                    $("#receiver").html($(this).val())
                });
            });
            .block{position:relative;display: block;}
            .block img{position:absolute;top: 0px;left: 0px;width: 100%;max-width: 300px;z-index: 0;}
            .block span{
                position: relative;
                top: 20px;
                left: 50px;
                z-index: 1;
                color: #fff;
            }
            input{width: 500px;margin-top: 185px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
            <img src="http://shop.sharepoint.pt/WebRoot/ce_pt/Shops/260250/49BE/F9BB/1A81/F094/25FB/C0A8/8008/8E12/Cart_00E3_o_0020_Branco_0020_com_0020_Banda_0020_Magn_00E9_tica_0020_de_0020_Baixa_0020_Coercividade_0020__0096__0020_caixa_0020_de_0020_500_0020_Cart_00F5_es.jpg" alt="">
            <span id="receiver">[escreva aqui a sua mensagem]</span>
        </div>
        <br>
        <label for="">Escreva Aqui</label>
        <input type="text" value="[escreva aqui a sua mensagem]" id="provider">

Then to email you can send an HTML to the person with the information. 

$to = '[email protected]'; //Email que vai ser enviado
$from = '[email protected]';//De quem
$subject = 'Website Cartão Personalizado'; //Assunto
$html = "SEU HTML AQUI"; //aqui você pode inserir o html gerado

//Config
$headers = "From: " . $from . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";

//função mail
mail($to, $subject, $html, $headers);

I hope I’ve helped.

Browser other questions tagged php jquery wordpress jquery-plugins wordpress-plugin

You are not signed in. Login or sign up in order to post.