如何使用 JavaScript 和 PHP 通过电子邮件发送屏幕截图

使用 JS 和 PHP 发送屏幕截图：入门

在当今的 Web 开发环境中，前端 JavaScript 和后端 PHP 功能之间的集成为动态 Web 应用程序开辟了广泛的可能性。其中一个应用程序是能够使用 JavaScript 在客户端捕获屏幕截图，然后将这些捕获发送到服务器端 PHP 脚本以进行进一步处理或存储。这个过程虽然看似简单，但涉及对数据处理、编码和 Web 请求的异步性质的细致理解。 Fetch API 是一种用于发出网络请求的现代接口，在这种交互中发挥着至关重要的作用，使开发人员能够轻松地将数据从客户端发送到服务器。

然而，此过程中的一个常见障碍是处理二进制数据（例如图像），并确保它们在发送、存储或操作时保持完整性。这就是编码技术发挥作用的地方，将二进制数据转换为可以通过互联网安全传输的格式。此外，当目标是将这些屏幕截图作为附件通过电子邮件发送时，使用 PHPMailer 这样的库会增加另一层复杂性，特别是在正确处理文件附件方面。挑战通常在于图像数据的正确编码和解码，以确保附件被接收并可以作为有效的 .png 文件打开，这是一个关键步骤，需要深入了解 JavaScript 和 PHP 的工作原理。

命令	描述
document.getElementById()	获取具有指定 ID 的元素。
canvas.toDataURL()	返回一个数据 URI，其中包含由类型参数指定的格式的图像表示（默认为 PNG）。
FormData()	创建一个新的 FormData 对象，该对象可用于以一系列键值对的形式发送表单数据。
formData.append()	将新值附加到 FormData 对象内的现有键上，或者添加该键（如果该键尚不存在）。
fetch()	用于向服务器发出请求。可用于提交表单数据或从服务器检索数据。
base64_decode()	解码使用 MIME base64 编码的数据。在 PHP 中用于解码 Base64 编码的字符串。
uniqid()	根据当前时间（以微秒为单位）生成唯一 ID。在 PHP 中用于生成唯一的文件名。
file_put_contents()	将字符串写入文件。在 PHP 中用于创建新文件或使用给定数据覆盖现有文件。
new PHPMailer()	创建 PHPMailer 类的新实例，用于发送电子邮件。
$mail->$mail->isSMTP()	指定使用 SMTP 发送电子邮件。
$mail->$mail->addAttachment()	向电子邮件添加附件。
$mail->$mail->send()	发送电子邮件。

了解通过 JavaScript 和 PHP 进行屏幕截图传输和电子邮件发送

JavaScript 和 PHP 脚本协同工作，在客户端捕获屏幕截图，对其进行编码，然后将其传输到服务器，并在服务器上以附件形式通过电子邮件发送。从 JavaScript 部分开始，该过程首先使用“toDataURL()”方法捕获画布元素的当前状态。此方法将画布内容转换为 base64 编码的 PNG 图像，表示为数据 URI。这种编码至关重要，因为它允许将二进制图像数据视为字符串，从而促进其在互联网上的传输。然后对编码的图像数据进行 URI 编码，以确保 base64 字符串中的任何特殊字符不会干扰传输。它作为键值对附加到 FormData 对象，其中“drawingData”是键。然后使用 Fetch API 将此 FormData 对象发送到服务器，目标 URL 指向 PHP 脚本，方法设置为 POST。

在服务器端，PHP 脚本接管。它首先从 POST 请求中提取编码图像数据。数据最初经过 URI 解码，然后“base64_decode”函数将其解码回二进制形式。该二进制数据代表原始 PNG 图像，并使用 file_put_contents() 写入服务器文件系统中的文件，准备附加到电子邮件中。 PHPMailer 库用于构建和发送电子邮件。它配置用于发送邮件的 SMTP 设置、附加生成的 PNG 文件并设置电子邮件的内容。 PHPMailer 在处理电子邮件附件和 MIME 类型方面的多功能性可确保附件正确编码并作为“.png”文件发送。该脚本使用 Base64 编码进行图像数据传输以及服务器端的后续解码至关重要，因为它解决了在 Web 应用程序中处理二进制数据的复杂性。此方法可确保屏幕截图在传输过程中保持完整，并作为有效附件到达收件人的收件箱。

// JavaScript: Capturing a screenshot and sending it to the server
const canvas = document.getElementById('drawCanvas');
async function sendEmail() {
  const url = '/wp-content/themes/julietcolombe/sendEmail.php';
  const drawingData = canvas.toDataURL();
  const formData = new FormData();
  formData.append('image', drawingData.split(',')[1]); // Sending base64 encoded string
  try {
    const response = await fetch(url, { method: 'POST', body: formData });
    const body = await response.text();
    console.log(body);
  } catch (error) {
    console.error('Error sending email:', error);
  }
}
sendEmail();

//php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'vendor/autoload.php';
$drawingData = isset($_POST['image']) ? $_POST['image'] : false;
$imageData = base64_decode($drawingData);
$imageName = uniqid() . '.png';
$imagePath = sys_get_temp_dir() . DIRECTORY_SEPARATOR . $imageName;
file_put_contents($imagePath, $imageData);
$mail = new PHPMailer(true);
try {
  // Server settings
  $mail->isSMTP();
  $mail->Host = 'smtp.example.com';
  $mail->SMTPAuth = true;
  $mail->Username = 'user@example.com';
  $mail->Password = 'secret';
  $mail->SMTPSecure = 'tls';
  $mail->Port = 587;
  // Recipients
  $mail->setFrom('from@example.com', 'Mailer');
  $mail->addAddress('to@example.com', 'Joe User'); // Add a recipient
  // Attachments
  $mail->addAttachment($imagePath, $imageName);
  // Content
  $mail->isHTML(true);
  $mail->Subject = 'Here is your screenshot';
  $mail->Body    = 'This email contains a screenshot.';
  $mail->send();
  echo 'Message has been sent';
} catch (Exception $e) {
  echo 'Message could not be sent. Mailer Error: ', $mail->ErrorInfo;
}
//

使用网络技术探索图像编码和电子邮件

在讨论通过 Web 应用程序发送屏幕截图的复杂性时，深入研究图像编码和电子邮件方面的挑战和解决方案至关重要。在 Web 应用程序中对图像进行编码、传输和解码的过程是一个复杂但重要的过程，确保图像在不同平台和技术之间保持其完整性和格式。此过程的主要障碍之一是将二进制数据编码为可以轻松通过互联网传输的格式。 Base64 编码在这里发挥作用，将二进制数据转换为字符串格式，可以包含在 JSON 有效负载、表单数据或 URL 中而不会损坏。当图像需要从客户端 JavaScript 发送到服务器端脚本（例如 PHP）以进行处理或通过电子邮件发送时，此方法在 Web 开发中特别有用。

通过电子邮件发送图像也带来了一系列挑战，尤其是在处理 Web 应用程序中的附件时。 PHPMailer 是一个功能强大的库，可以简化此任务，提供易于使用的界面，用于将文件附加到电子邮件、设置 MIME 类型以及配置电子邮件发送的 SMTP 设置。但是，开发人员必须确保图像数据正确解码并在服务器上保存为文件，然后才能附加并通过电子邮件发送。此过程需要很好地了解 PHP 中的文件处理，包括“base64_decode”和“file_put_contents”等函数，以将编码图像转换回二进制格式并将其保存为文件。此外，正确配置电子邮件标头和 MIME 类型对于确保电子邮件客户端将附件正确解释为图像文件至关重要。

从 Web 应用程序捕获屏幕截图并通过电子邮件发送的能力说明了客户端和服务器端技术之间强大的相互作用。通过这次探索，我们揭开了在 JavaScript 中对屏幕截图进行编码、使用 Fetch API 安全传输它们以及在 PHP 服务器上处理它们以通过 PHPMailer 作为电子邮件附件发送的过程。检查了将屏幕截图编码为 Base64 格式、将数据正确传输到 PHP 脚本以及解码图像并将其附加到电子邮件中所涉及的复杂性的关键步骤。此工作流程不仅展示了 Base64 编码和 Fetch API 的实际使用，还强调了在 Web 开发中正确处理二进制数据的重要性。对于希望在应用程序中实现类似功能的开发人员来说，理解这些概念至关重要，从而确保端到端流程能够为用户无缝运行。此外，本指南强调了彻底测试和调试的重要性，特别是在处理文件格式和编码方面，以防止出现损坏或无法读取文件等常见陷阱。最终，掌握这些技术为创建更具动态性和交互性的 Web 应用程序提供了多种可能性。