كيفية التقاط لقطة شاشة لصفحة ويب باستخدام PHP

حسين محمد الباز · 16 مارس 2021

Wael Aljamal · 16 مارس 2021

هل تريد جعل المستخدم قادراً على حفظ الصفحة بشكل pdf؟

الأفضل الطباعة من جهة المستخدم و عدم الطلب من السيرفر القيام بذلك.

لطباعة قسم من صفحة الويب عن طريق جافاسكربت و jQuery يمكنك الاطلاع على المكتبة التالية printThis

رابط التحميل و توثيق المكتبة من GitHub : github./printThis.

يتم تنفيذ الشيفرو عن طريق استدعاء الدالة print this لأي عنصر HTML تريده مثلا:

$('selector').printThis();

يمكنك إيجاد مثال من هنا : printThis example

مع العلم يمكن تخصيص الإضافة بكثير من الخيارات:

$("#mySelector").printThis({
    debug: false,               // show the iframe for debugging
    importCSS: true,            // import parent page css
    importStyle: false,         // import style tags
    printContainer: true,       // print outer container/$.selector
    loadCSS: "",                // path to additional css file - use an array [] for multiple
    pageTitle: "",              // add title to print page
    removeInline: false,        // remove inline styles from print elements
    removeInlineSelector: "*",  // custom selectors to filter inline styles. removeInline must be true
    printDelay: 333,            // variable print delay
    header: null,               // prefix to html
    footer: null,               // postfix to html
    base: false,                // preserve the BASE tag or accept a string for the URL
    formValues: true,           // preserve input/form values
    canvas: false,              // copy canvas content
    doctypeString: '...',       // enter a different doctype for older markup
    removeScripts: false,       // remove script tags from print content
    copyTagClasses: false,      // copy classes from the html & body tag
    beforePrintEvent: null,     // function for printEvent in iframe
    beforePrint: null,          // function called before iframe is filled
    afterPrint: null            // function called before iframe is removed
});

Sam Ahw · 16 مارس 2021

في PHP بدءً من الإصدار 5 ومافوق يوجد التابع imagegrabscreen:

<?php
$im = imagegrabscreen();
imagepng($im, "myscreenshot.png");
imagedestroy($im);
?>

وأيضاً، يمكنك استخدام الجافاسكريبت والتي بدورها موجودة من طرف المستخدم أي متصفح الويب. ويوجد العديد من المكتبات التي تساعدك في ذلك منها html2canvas ، على سبيل المثال الكود التالي يقوم بالتقاط الشاشة وإظهارها في نافذة منبثقة جديدة:

const screenshotTarget = document.body;

html2canvas(screenshotTarget).then((canvas) => {
    const base64image = canvas.toDataURL("image/png");
    window.location.href = base64image;
});

يمكنك أيضاً عن طريق الجافاسكريبت استخدام getDisplayMedia والتي بدورها تتيح لك التعامل مع API للشاشة، مثال:

const capture = async () => {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  const video = document.createElement("video");

  try {
    const captureStream = await navigator.mediaDevices.getDisplayMedia();
    video.srcObject = captureStream;
    context.drawImage(video, 0, 0, window.width, window.height);
    const frame = canvas.toDataURL("image/png");
    captureStream.getTracks().forEach(track => track.stop());
    window.location.href = frame;
  } catch (err) {
    console.error("Error: " + err);
  }
};

capture();

بلال زيادة · 16 مارس 2021

يمكنك استخدام مكتبة html2canvas.js ويمكنك استخدام الأكواد التالية بحيث ملف index.php يكون بداخله التالي

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
function screenshot()
{
 html2canvas(document.body, {  
  onrendered: function(canvas)  
  {
    var img = canvas.toDataURL()
    $.post("screenshot.php", {data: img}, function (file){
	window.location.href =  "screenshot.php?file="+ encodeURI(file)
    });
  }
 });
}
</script>
<body>
<div id="wrapper">
<div id="screenshot_div">
  <button type="button" onclick="screenshot()">أخذ لقطة</button>
</div>
</div>
</body>
</html>

وملف screenshot.php يكون بداخله الكود التالي

<?php
if(isset($_GET['file']))
{
 $file=$_GET['file'];
 if (file_exists($file))
 {
  header('Content-Description: File Transfer');
  header('Content-Type: image/png');
  header('Content-Disposition: attachment; filename='.basename($file));
  header('Content-Transfer-Encoding: binary');
  header('Expires: 0');
  header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
  header('Pragma: public');
  header('Content-Length: ' . filesize($file));
  ob_clean();
  flush();
  readfile($file);
  unlink($file);
  exit;
 }
}

if(isset($_POST['data']))
{
 $data = $_POST['data'];
 $file = md5(uniqid()) . '.png';
 $uri =  substr($data,strpos($data,",")+1);
 file_put_contents('./'.$file, base64_decode($uri));
 echo $file;
 exit();
}
?>

ويمكنك التجربة على المتصفحة سترى أنه يقوم بإلتقاط الصورة للصفحة.

كيفية التقاط لقطة شاشة لصفحة ويب باستخدام PHP

السؤال

حسين محمد الباز

3 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

Sam Ahw

بلال زيادة

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية