将动态创建的 PNG 从 ajax 发送到 PHPmailer 附件？答案

【问题标题】：Send dynamically created PNG from ajax to PHPmailer attachment?将动态创建的 PNG 从 ajax 发送到 PHPmailer 附件？
【发布时间】：2018-09-21 23:50:14
【问题描述】：

所以基本上我已经尽我所能在这里尝试了。

我正在我的网站上添加一项新功能，其中包括创建一个 PNG 图像 (html2canvas)，允许用户下载该图像（效果很好）和/或将其发送给“朋友”或“你自己”一次图像已创建...

问题是我无法让 PHPmailer 捕获图像并将其发送到给定的电子邮件地址，它只是发送带有附件的电子邮件，但该附件是空的。

这是我最后的代码：

HTML：

<form id="form_id" method="post" enctype="multipart/form-data">
   <input id="form_image_data" type="hidden" name="image" value="">
   <button id="send">Send</button>
</form>

JS （这是单击“发送”按钮时发生的情况）：

var canvas = document.querySelector('canvas').toDataURL();
var image = document.getElementById('form_image');
image.setAttribute('name', 'image');
var formData = new FormData($('#form_id')[0]);

        $.ajax({
            dataType: 'JSON',
            data: formData,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            url: 'the_url_to_phpmailer',
            success: function(data) {
                alert(data.confirm);
            }
        });

PHP：

$email = $_POST['email'];
$image = $_POST['image'];
$content = '.....';


$mail->setFrom('myemail@myemail.com', 'Website Name');
$mail->addAddress($email); 
$mail->isHTML(true);

$mail->addStringAttachment($image, 'image.png');
$mail->Subject = 'Image from website.';
$mail->Body    = $content;
$mail->AltBody = $content;

$mail->send();

非常感谢！一切都非常感谢！

【问题讨论】：

到达的数据是什么格式的？看起来它可能是一个data URL，它不是您需要的二进制 PNG 数据。我们需要更多关于数据在您的脚本中的样子的信息。
@Synchro 它是base64，只是摸索出来的。我会自己回答这个问题，谢谢！

标签： php ajax phpmailer

【解决方案1】：

我终于明白了！我做了大量的研究，看到了来自 stackoverflow 的一篇文章并实现了它..

这是从 JS 动态（或非动态）发送图像或画布到 PHPmailer 的方法。

HTML：

<form id="form_id" method="post" enctype="multipart/form-data">
   <canvas id="canvas"> <!--image--> </canvas>
   <input id="hidden_input" type="hidden" name="image" value="">
   <button id="send">Send</button>
</form>

JS：

var send_this = document.getElementById('canvas').toDataURL("image/png");
document.querySelector('#hidden_input').value=send_this;

var formData = new FormData($('#form_id')[0]);
$.ajax({
            dataType: 'JSON',
            data: formData,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            url: 'the_url_to_phpmailer',
            success: function(data) {
                alert(data.confirm);
            }
        });

PHP：

 <?php

    $email = $_POST['email'];
    $image = $_POST['image'];

    $data = substr($image, strpos($image, ",")); /*This is important in order to make it work,
 the dataURL comming from JS comes with an extra string at the begining that does not belong to a base64 string, 
so we remove it and base64_decode after.*/

    $filename="image.png"; 
    $encoding = "base64"; 
    $type = "image/png";

    $email = $_POST['email'];
    $image = $_POST['image'];
    $content = '.....';

    $mail->setFrom('myemail@myemail.com', 'My Website Name');
    $mail->addAddress($email); 
    $mail->isHTML(true);

    $mail->AddStringAttachment(base64_decode($data), $filename, $encoding, $type);
    $mail->Subject = 'Image from website.';
    $mail->Body    = $content;
    $mail->AltBody = $content;

    $mail->send();

    ?>

希望这对未来的某人有所帮助，它确实完美无缺。收件人收到附加的 png 图片。

【讨论】：