保存HTML5画布图像,然后通过PHP发送电子邮件

所以我的网站上有一个表格(www.100danish.com),其中包含一个HTML5画布元素供用户使用 绘制图片及其表格。</ p>

我想要发生的是用户点击提交,这会发送画布的图像以及表格信息(姓名,电子邮件) 和消息)。 现在我的AJAX和PHP的内容如下。 我知道我需要使用JavaScript和PHP,但PHP不是我的专业知识。 </ p>

非常感谢任何帮助!! </ p>

JavaScript </ p>

  // AJAX请求 提交表单
$('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(“&lt; p class ='ajax-p'&gt;感谢您与我们联系,我们会尽快与您联系&lt; br&gt; Joey&amp; amp; Trev&lt; / p&gt;”) n})
});
</ code> </ pre>

PHP </ p>

 &lt;?php 
$ name = $ _POST ['name'];
$ email = $ _POST ['email'];
$ message = $ _POST ['message'];

$ from from''From:$ name';

$ to ='joey@100danish.com';

$ subject = '100丹麦表格提交';
$ body =“来自:$ name
E-Mail:$ email

Message:
$ message”;

mail($ to,$ subject,$ body,$ email);
?&gt;
</ code> </ pre>
</ div>

展开原文

原文

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.

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. I know that I will need to use JavaScript and PHP but PHP is not my expertise.

Any help would be much appreciated!!

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 &amp; Trev</p>")
    })
});

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
E-Mail: $email

Message:
$message";

    mail ($to, $subject, $body, $email);
  ?>

1个回答



您要问两个不同的问题:(1)将画布数据发送到服务器,(2)发送电子邮件。 问题2在互联网上无处不在。 问题1可以解决如下:</ p>

HTML:</ p>

 &lt; canvas id =“myCanvas”width =“800”height =  “450”&gt;&lt; / canvas&gt; 
</ code> </ pre>

JS:</ p>

  //获取base64数据
var canvas = $(“#myCanvas”)。get(0);
var data = canvas.toDataURL();

//发送到服务器
var request = $ .ajax({
type:“POST” ,
url:“canvas-data-receiver.php”,
data:{
base64Data:data
}
});

request.done(function(response){
alert(“ 数据发布到服务器!“);
});

request.fail(function(){
alert(”无法将数据发送到服务器!“);
});
</ code> </ pre>
</ div>

展开原文

原文

You're asking 2 separate questions: (1) send canvas data to server, (2) send email. Question 2 is everywhere on the internet. Question 1 can be solved as below:

HTML:

<canvas id="myCanvas" width="800" height="450"></canvas>

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!");
});

dongmouhao7438
dongmouhao7438 有解决方案吗?
大约 3 年之前 回复
dongpingwu8378
dongpingwu8378 很抱歉我最初的问题很混乱。 我希望通过电子邮件发送画布图像,而不是将其保存到服务器上。
大约 6 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐