Kā nosūtīt ekrānuzņēmumu pa e-pastu, izmantojot JavaScript un PHP

Ekrānuzņēmumu sūtīšana, izmantojot JS un PHP: Primer

Mūsdienu tīmekļa izstrādes vidē integrācija starp priekšgala JavaScript un aizmugures PHP funkcionalitāti ir pavērusi plašu iespēju klāstu dinamiskām tīmekļa lietojumprogrammām. Viena no šādām lietojumprogrammām ir iespēja tvert ekrānuzņēmumus klienta pusē, izmantojot JavaScript, un pēc tam nosūtīt šos attēlus uz servera puses PHP skriptu tālākai apstrādei vai glabāšanai. Šis process, kaut arī šķietami vienkāršs, ietver niansētu izpratni par datu apstrādi, kodēšanu un tīmekļa pieprasījumu asinhrono raksturu. Šajā mijiedarbībā izšķiroša nozīme ir Fetch API — modernai saskarnei tīkla pieprasījumu veikšanai, kas ļauj izstrādātājiem viegli nosūtīt datus no klienta puses uz serveri.

Tomēr bieži sastopams šķērslis šajā procesā ir bināro datu, piemēram, attēlu, apstrāde un to integritātes nodrošināšana, kad tie tiek nosūtīti, uzglabāti vai apstrādāti. Šeit tiek izmantotas kodēšanas metodes, kas pārvērš bināros datus formātā, ko var droši pārsūtīt internetā. Turklāt, ja mērķis ir šos ekrānuzņēmumus nosūtīt pa e-pastu kā pielikumus, tādas bibliotēkas kā PHPMailer izmantošana rada vēl vienu sarežģītības pakāpi, jo īpaši pareizi apstrādājot failu pielikumus. Izaicinājums bieži ir saistīts ar pareizu attēla datu kodēšanu un atkodēšanu, lai nodrošinātu, ka pielikums tiek saņemts un to var atvērt kā derīgu .png failu, kas ir būtisks solis, kas prasa dziļu ieskatu gan JavaScript, gan PHP darbībā.

Izpratne par ekrānuzņēmumu pārsūtīšanu un sūtīšanu pa e-pastu, izmantojot JavaScript un PHP

Piedāvātie JavaScript un PHP skripti darbojas vienlaikus, lai tvertu ekrānuzņēmumu klienta pusē, to kodētu un pēc tam nosūtītu uz serveri, kur tas tiek nosūtīts pa e-pastu kā pielikums. Sākot ar JavaScript daļu, process sākas ar kanvas elementa pašreizējā stāvokļa tveršanu, izmantojot tā metodi “toDataURL()”. Šī metode pārvērš audekla saturu base64 kodētā PNG attēlā, kas attēlots kā datu URI. Šis kodējums ir ļoti svarīgs, jo tas ļauj bināros attēla datus uzskatīt par virkni, atvieglojot to pārsūtīšanu internetā. Pēc tam kodētie attēla dati tiek kodēti ar URI, lai nodrošinātu, ka base64 virknē esošās īpašās rakstzīmes netraucē pārraidi. Tas ir pievienots FormData objektam kā atslēgas un vērtības pāris, kur atslēga ir “drawingData”. Pēc tam šis FormData objekts tiek nosūtīts uz serveri, izmantojot Fetch API, un galamērķa URL norāda uz PHP skriptu un metode ir iestatīta uz POST.

Servera pusē PHP skripts pārņem. Tas sākas ar kodēto attēla datu izvilkšanu no POST pieprasījuma. Dati sākotnēji tiek atšifrēti URI, un pēc tam funkcija "base64_decode" tos atšifrē binārā formā. Šie binārie dati attēlo sākotnējo PNG attēlu un tiek ierakstīti failā servera failu sistēmā, izmantojot “file_put_contents()”, un tie ir gatavi pievienošanai e-pasta ziņojumam. PHPMailer bibliotēka tiek izmantota, lai izveidotu un nosūtītu e-pastu. Tas konfigurē SMTP iestatījumus pasta sūtīšanai, pievieno ģenerēto PNG failu un iestata e-pasta saturu. PHPMailer daudzpusība e-pasta pielikumu un MIME veidu apstrādē nodrošina, ka pielikums tiek pareizi kodēts un nosūtīts kā ".png" fails. Skripta base64 kodējuma izmantošana attēla datu pārsūtīšanai un tai sekojošai dekodēšanai servera pusē ir ļoti svarīga, jo tas pārvalda bināro datu apstrādes sarežģītību tīmekļa lietojumprogrammās. Šī metode garantē, ka ekrānuzņēmums pārsūtīšanas procesā paliek neskarts un kā derīgs pielikums nonāk adresāta iesūtnē.

// 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;
}
?>

Attēlu kodēšanas un e-pasta sūtīšanas izpēte, izmantojot tīmekļa tehnoloģijas

Apspriežot sarežģījumus, kas saistīti ar ekrānuzņēmumu sūtīšanu, izmantojot tīmekļa lietojumprogrammas, ir ļoti svarīgi iedziļināties izaicinājumos un risinājumos saistībā ar attēlu kodēšanu un sūtīšanu pa e-pastu. Attēlu kodēšanas, pārsūtīšanas un dekodēšanas process tīmekļa lietojumprogrammās ir sarežģīts, bet būtisks process, kas nodrošina, ka attēli saglabā savu integritāti un formātu dažādās platformās un tehnoloģijās. Viens no galvenajiem šķēršļiem šajā procesā ir bināro datu kodēšana formātā, ko var viegli pārsūtīt internetā. Šeit tiek izmantots Base64 kodējums, pārveidojot bināros datus virknes formātā, ko bez bojājumiem var iekļaut JSON resursos, veidlapu datos vai vietrāžos URL. Šī metode ir īpaši noderīga tīmekļa izstrādē, kad attēli ir jānosūta no klienta puses JavaScript uz servera puses skriptu, piemēram, PHP, lai tos apstrādātu vai nosūtītu pa e-pastu.

Attēlu nosūtīšana pa e-pastu rada savas problēmas, jo īpaši, strādājot ar pielikumiem tīmekļa lietojumprogrammās. PHPMailer ir jaudīga bibliotēka, kas vienkāršo šo uzdevumu, nodrošinot ērti lietojamu saskarni failu pievienošanai e-pastiem, MIME veidu iestatīšanai un SMTP iestatījumu konfigurēšanai e-pasta sūtīšanai. Tomēr izstrādātājiem ir jānodrošina, ka attēla dati tiek pareizi atšifrēti un saglabāti kā fails serverī, pirms tos var pievienot un nosūtīt pa e-pastu. Šim procesam ir nepieciešama laba izpratne par failu apstrādi PHP, tostarp tādas funkcijas kā "base64_decode" un "file_put_contents", lai pārveidotu kodēto attēlu atpakaļ binārajā formātā un saglabātu to kā failu. Turklāt ir ļoti svarīgi pareizi konfigurēt e-pasta galvenes un MIME veidus, lai nodrošinātu, ka e-pasta klients pielikumu interpretē pareizi kā attēla failu.