[英]Saving HTML5 canvas image then sending via e-mail with PHP
So I have a form on my website (www.100danish.com) which includes an HTML5 canvas element for the user to draw a picture along with their form. 因此,我在我的网站(www.100danish.com)上有一个表单,其中包含一个HTML5 canvas元素,供用户与表单一起绘制图片。
What I want to have happen is the user clicks submit and this sends the image of the canvas along with the form information (name, e-mail, and message). 我想要发生的是用户单击提交,这将发送画布图像以及表单信息(名称,电子邮件和消息)。 Right now what I have is the following for my AJAX and PHP.
现在,对于我的AJAX和PHP,我拥有以下内容。 I know that I will need to use JavaScript and PHP but PHP is not my expertise.
我知道我将需要使用JavaScript和PHP,但是PHP不是我的专长。
Any help would be much appreciated!! 任何帮助将非常感激!!
JavaScript 的JavaScript
//AJAX request to submit form
$('form').submit(function(evt) {
evt.preventDefault();
var canvasData = canvas.toDataURL('image/png');
var url = $(this).attr("action");
var formData = $(this).serialize();
$.post(url, [formData, canvasData] function(response) {
$('#contact-bottom').html("<p class='ajax-p'>Thanks for reaching out to us, we'll be in touch with you soon<br>Joey & Trev</p>")
})
});
PHP 的PHP
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: $name';
$to = 'joey@100danish.com';
$subject = '100 Danish Form Submission';
$body = "From: $name\nE-Mail: $email\n\nMessage:\n$message";
mail ($to, $subject, $body, $email);
?>
You're asking 2 separate questions: (1) send canvas data to server, (2) send email. 您在问两个独立的问题:(1)将画布数据发送到服务器,(2)发送电子邮件。 Question 2 is everywhere on the internet.
问题2在互联网上无处不在。 Question 1 can be solved as below:
问题1可以通过以下方式解决:
HTML: HTML:
<canvas id="myCanvas" width="800" height="450"></canvas>
JS: JS:
//get base64 data
var canvas = $("#myCanvas").get(0);
var data = canvas.toDataURL();
//send to server
var request = $.ajax({
type: "POST",
url: "canvas-data-receiver.php",
data: {
base64Data:data
}
});
request.done(function(response) {
alert("Data posted to server!");
});
request.fail(function(){
alert("Failed to send data to server!");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.