Create an image with superimposed dynamic text and email
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 finally 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 of how to do it?
1
Author: Laranja Mecânica, 2016-07-13
2 answers
Do so, I put adjust in front of the commands that 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>
1
Author: Miguel, 2016-07-13 16:14:05
To do text insertion you can easily do 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 helped.
0
Author: Ricardo Mota, 2016-07-13 12:13:49