إذا كنت تريد التقاط لقطة شاشة لجزء من صفحة الويب الخاصة بك أو كلها باستخدام JavaScript ، فقد تجد نفسك عالقًا. قد يبدو إنشاء صورة من عنصر HTML بمثابة تحدٍ ، حيث لا توجد طريقة مباشرة للقيام بذلك في JavaScript.

لحسن الحظ ، هذه ليست مهمة مستحيلة وهي في الواقع سهلة للغاية باستخدام الأدوات المناسبة. باستخدام مكتبة html-to-image ، فإن إنشاء صور لعقد DOM أمر بسيط مثل استدعاء وظيفة واحدة.

كيف يعمل html-to-image؟

ال html-to-image مكتبة تنتج صورة في شكل عنوان URL لبيانات base64. وهو يدعم العديد من تنسيقات الإخراج ، بما في ذلك PNG و JPG و SVG. لإجراء هذا التحويل ، تستخدم المكتبة هذه الخوارزمية:

  1. قم بإنشاء نسخة من عنصر HTML الهدف وتوابعه وأي عناصر زائفة مرفقة.
  2. انسخ التصميم لجميع العناصر المستنسخة وقم بتضمين التصميم المضمن.
  3. قم بتضمين خطوط الويب ذات الصلة ، إن وجدت.
  4. تضمين أي صور موجودة.
  5. قم بتحويل العقدة المستنسخة إلى XML ، ثم SVG.
  6. استخدم SVG لإنشاء عنوان URL للبيانات.

المحاذير والقيود

على الرغم من أن html-to-image مكتبة رائعة ، إلا أنها ليست مثالية. لها بعض المحاذير وهي:

  • لن تعمل المكتبة في Internet Explorer أو Safari.
    • instagram viewer
  • إذا تضمن HTML الذي تحاول تحويله عنصر قماش ملطخ ، فستفشل المكتبة. كما MDN توضح أن تضمين البيانات غير المعتمدة من CORS في عنصر لوحة الرسم سيؤدي إلى تشويهها.
  • نظرًا لأن المستعرضات تضع قيودًا على الحجم الأقصى لعنوان URL للبيانات ، فهناك قيود على حجم HTML الذي يمكن للمكتبة تحويله.

استخدام المكتبة

لتجربة المكتبة ، فإن أول شيء عليك القيام به هو إنشاء دليل مشروع على جهازك المحلي. بعد ذلك ، قم بتثبيت html-to-image في هذا الدليل باستخدام مدير الحزم npm. إليك الأمر الطرفي لتثبيته:

npm تثبيت- احفظ html-to-image

يجب عليك أيضًا تثبيت حزمة JavaScript ، لتسهيل استخدام المكتبة. ال esbuild يمكن أن يساعد bundler في تجميع وحدات العقدة في برامج نصية متوافقة مع الويب.

npm تثبيت esbuild

هذا كل ما تحتاجه لتثبيته. بعد ذلك ، قم بإنشاء ملف يسمى index.html في دليلك ، وخدمه مع خادم ويب من اختيارك. ضع الكود التالي في index.html:

<! DOCTYPE html>
<أتش تي أم أل لانج ="ar">
<رأس>
<meta charset ="UTF-8">
<اسم التعريف ="منفذ العرض"
 المحتوى ="العرض = عرض الجهاز ، قابلية المستخدم للتوسع = لا ، المقياس الأولي = 1.0 ، الحد الأقصى للمقياس = 1.0 ، الحد الأدنى للمقياس = 1.0">
<meta http-equiv ="متوافق مع X-UA" المحتوى ="ie = حافة">
<لقب>وثيقة</title>
<نمط>
 .colorful-div {
 الحشو: 3rem.
 اللون الابيض؛
 صورة الخلفية: التدرج الخطي (إلى اليمين ، الأصفر ، إعادة التدرج الأرجواني) ؛
 الحدود: 1 بكسل أسود صلب ؛
 الهامش: 1rem auto؛
 حجم الخط: 3rem ؛
 عائلة الخطوط: مخطوطة ؛
 }
</style>
</head>
<هيئة>
<فئة div ="ملون div">
 أنا'م ستكون في لقطة شاشة!
</div>
<فئة div ="نص طويل">
 أنا'م مثال على فقرة مطولة بما فيه الكفاية
 يوضح أن أخذ لقطات الشاشة في JavaScript هو
 حقًا سهل جدًا ، للأسباب التالية:
<ماي>
<لي>السبب 1</li>
<لي>السبب 2</li>
<لي>السبب 2</li>
</ul>
</div>
<النصي src ="out.js"></script>
</body>
</html>

يُنشئ هذا الرمز عنصرين على الصفحة: عنصر div بخلفية متدرجة ، وبعض النص وقائمة غير مرتبة داخل div أخرى. بعد ذلك ، ستكتب JavaScript لتحويل هذه العناصر إلى صور. ضع الكود التالي في ملف جديد يسمى script.js:

يستورد * كما htmlToImage من "html-to-image" ؛
كونست إليمس = ['.colorful-div', 'نص طويل']


إليمس.لكل((elem، ind) => {
مقدار ثابت عقدة = وثيقة.querySelector (elem)
htmlToImage.toPng(العقدة)
 .ومن بعد(وظيفة (بيانات) {
يترك img = الجديد صورة()؛
 img.src = dataUrl ؛
وثيقة.هيئة.إلحاق الطفل(IMG);
 })
 .قبض على(وظيفة(خطأ){
 خطأ وحدة التحكم ('تبا شيء ما حدث بشكل خاطئ!');
وحدة التحكم.log (خطأ)
 });
})

يقوم هذا الرمز ببعض الأشياء:

  • يستورد مكتبة html-to-image.
  • ينشئ مصفوفة مكونة من محددات CSS تستهدف العنصرين.
  • ينشئ صورة PNG في شكل عنوان URL للبيانات من كل عنصر من عناصر المصفوفة.
  • ينشئ علامة img ويضبط سمة src الخاصة بها على عنوان URL للبيانات ، مما يؤدي إلى إنشاء نسخ صور للعنصرين.

استخدم الآن esbuild لإنشاء الملف المجمع (out.js) يشير هذا الملف index.html عن طريق تشغيل ما يلي في جهازك الطرفي:

 ./node_modules/.bin/esbuild script.js --bundle --outfile = out.js

في هذه المرحلة ، إليك الشكل الذي يجب أن يبدو عليه index.html في متصفحك:

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

تعمل هذه المكتبة أيضًا مع إطارات عمل JavaScript. ال وثائق html-to-image يحتوي على إرشادات حول كيفية إنشاء تنسيقات صور أخرى. يتضمن أيضًا مثالًا يوضح كيفية استخدام المكتبة مع React.

أخذ لقطات الشاشة باستخدام JavaScript أمر سهل

لا توجد طريقة JavaScript أصلية لإنشاء صور من عناصر HTML ، أو التقاط لقطات شاشة من DOM. ومع ذلك ، بمساعدة المكتبات والخدمات مثل html-to-image ، تصبح مهمة سهلة.

هناك طرق أخرى لتحقيق نتائج مماثلة ، مثل مكتبة wkhtmltoimage. يمكنك استخدام هذه الأداة مفتوحة المصدر لأخذ لقطات شاشة لصفحة ويب كاملة.