أخذ لقطة شاشة باستخدام جافا سكريبت

هذا الشرح يستخدم المكتبات التالية:

React.js
html-to-image npm package

الأوامر المستخدمة:

npx create react app my-project

npm i html-to-image

انشاء Form

فكرة التطبيق ستكون عبارة input يسمح للمستخدم بادخال اسمه ثم يتم وضع هذا الاسم على شهادة وأخذ لقطة شاشة لهذه الشهادة وتحميلها على جهاز المستخدم, يمكنك تطبيق أي فكرة أخرى حتى وان كانت لقطة شاشة لموقع ثابت بأكمله.

التعامل مع بيانات الـ Form

بعد انشاء الـ Form سنحتاج الى تخزين بياناته بالاضافة الى منع المتصفح من تحديث الصفحة وذلك ضمن دالة الـ submit.

  const [name, setName] = useState("");

  // Prevent refresh page after submit the form
  const submit = (e) => {
    e.preventDefault();

    const formData = new FormData(e.currentTarget);
    setName(formData.get("name"));

    capture();
  };

لاحظ ضمن دالة الـ submit قمنا باستدعاء دالة الـ capture وهي دالة تقدمها مكتبة “html-to-image“ المسؤولة عن تحويل أكواد HTML الى صورة png.

  //  Download Certificate (html-to-image function)
  const ref = useRef(null);
  const capture = useCallback(() => {
    toPng(ref.current, { cacheBust: true })
      .then((dataUrl) => {
        const link = document.createElement("a");
        link.download = "certificate.png";
        link.href = dataUrl;
        link.click();
      })
      .catch((err) => {
        console.log(err);
      });
  }, [ref]);

الكود كامل

النتيجة النهائية

النتيجة النهائية بعد اضافة تنسيقات CSS وبعض الـ validation لمنع ادخال قيمة فارغة أو طلب أكثر من شهادة من خلال تخزين key في localStorage.