保存HTML5畫布圖像，然后使用PHP通過電子郵件發送

Question

因此，我在我的網站（www.100danish.com）上有一個表單，其中包含一個HTML5 canvas元素，供用戶與表單一起繪制圖片。

我想要發生的是用戶單擊提交，這將發送畫布圖像以及表單信息（名稱，電子郵件和消息）。 現在，對於我的AJAX和PHP，我擁有以下內容。 我知道我將需要使用JavaScript和PHP，但是PHP不是我的專長。

任何幫助將非常感激！！

的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\nE-Mail: $email\n\nMessage:\n$message";

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

Answer 1

您在問兩個獨立的問題：（1）將畫布數據發送到服務器，（2）發送電子郵件。 問題2在互聯網上無處不在。 問題1可以通過以下方式解決：

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