אם אתה רוצה לצלם צילום מסך של חלק מדף האינטרנט שלך או כולו באמצעות JavaScript, אתה עלול למצוא את עצמך תקוע. יצירת תמונה מאלמנט HTML יכולה להיראות כמו אתגר, מכיוון שאין דרך ישירה לעשות זאת ב-JavaScript.

למרבה המזל, זו לא משימה בלתי אפשרית והיא, למעשה, די קלה עם הכלים המתאימים. שימוש בספריית html-to-image, יצירת תמונות של צמתי DOM היא פשוטה כמו קריאת פונקציה אחת.

איך html-לתמונה עובד?

ה html-לתמונה הספרייה מייצרת תמונה בצורה של כתובת URL של נתונים base64. הוא תומך במספר פורמטי פלט, כולל PNG, JPG ו-SVG. כדי לבצע המרה זו, הספרייה משתמשת באלגוריתם זה:

  1. צור שיבוט של רכיב HTML היעד, הילדים שלו וכל אלמנט פסאודו המצורף.
  2. העתק את הסגנון עבור כל האלמנטים המשובטים והטמיע את הסגנון בשורה.
  3. הטמע את גופני האינטרנט הרלוונטיים, אם יש כאלה.
  4. הטמע את כל התמונות הקיימות.
  5. המר את הצומת המשובט ל-XML ולאחר מכן ל-SVG.
  6. השתמש ב-SVG כדי ליצור כתובת URL לנתונים.

אזהרות ומגבלות

למרות ש-html-to-image היא ספרייה מצוינת, היא לא מושלמת. יש לו כמה אזהרות, כלומר:

  • הספרייה לא תעבוד ב-Internet Explorer או Safari.
  • אם ה-HTML שאתה מנסה להמיר כולל אלמנט קנבס פגום, הספרייה תיכשל. כפי ש
    instagram viewer
    MDN מסביר, הכללת נתונים שאינם מאושרים על ידי CORS באלמנט הקנבס שלך יפגעו בו.
  • מכיוון שדפדפנים מציבים מגבלות על הגודל המרבי של כתובת URL של נתונים, יש מגבלות על גודל ה-HTML שהספרייה יכולה להמיר.

שימוש בספרייה

כדי לנסות את הספרייה, הדבר הראשון שעליך לעשות הוא ליצור ספריית פרויקט במחשב המקומי שלך. לאחר מכן, התקן html-to-image בספרייה זו באמצעות מנהל החבילות npm. להלן פקודת הטרמינל להתקנתו:

npm להתקין--שמור html-לתמונה

כדאי גם להתקין מאגד JavaScript, כדי להקל מעט על השימוש בספרייה. ה esbuild bundler יכול לעזור לארוז מודולים של צומת לסקריפטים תואמים לאינטרנט.

npm להתקין esbuild

זה כל מה שאתה צריך כדי להתקין. לאחר מכן, צור קובץ בשם index.html בספרייה שלך, והגיש אותה עם שרת אינטרנט לבחירתך. שים את הקוד הבא ב-index.html:

<!doctype html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="UTF-8">
<מטא שם="נקודת מבט"
 תוכן="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<מטא http-equiv="X-UA-תואם" תוכן="כלומר=קצה">
<כותרת>מסמך</title>
<סִגְנוֹן>
 .colorful-div {
 ריפוד: 3rem;
 צבע לבן;
 תמונת רקע: שיפוע קווי (לימין, צהוב, רבקה סגול);
 גבול: 1px שחור מלא;
 שוליים: 1rem אוטומטי;
 גודל גופן: 3rem;
 font-family: cursive;
 }
</style>
</head>
<גוּף>
<div class="צבעוני-div">
 אני'אני הולך להיות בצילום מסך!
</div>
<div class="טקסט ארוך">
 אני'm דוגמה לפסקה מספיק מילולית
 ממחיש שצילום מסך ב-JavaScript הוא
 באמת מאוד קל, מהסיבות הבאות:
<ul>
<לי>סיבה 1</li>
<לי>סיבה 2</li>
<לי>סיבה 2</li>
</ul>
</div>
<script src="out.js"></script>
</body>
</html>

קוד זה יוצר שני אלמנטים בעמוד: div עם רקע גרדיאנט, וקצת טקסט ורשימה לא מסודרת בתוך div אחר. לאחר מכן, תכתוב את JavaScript כדי להמיר אלמנטים אלה לתמונות. שים את הקוד הבא בקובץ חדש בשם script.js:

יְבוּא * כפי ש htmlToImage מ "html-לתמונה";
const elems = ['.צבעוני-div', 'טקסט ארוך']


elems.לכל אחד((elem, ind) => {
const צומת = מסמך.querySelector (elem)
htmlToImage.toPng(צוֹמֶת)
 .לאחר מכן(פוּנקצִיָה (dataUrl) {
תן img = חָדָשׁ תמונה();
 img.src = dataUrl;
מסמך.גוּף.appendChild(img);
 })
 .לתפוס(פוּנקצִיָה(שְׁגִיאָה){
 console.error('אופס! משהו השתבש!');
לְנַחֵם.log (שגיאה)
 });
})

הקוד הזה עושה כמה דברים:

  • מייבא את ספריית ה-html לתמונה.
  • יוצר מערך המורכב מבוררי 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 לתמונה מכיל הוראות כיצד ליצור פורמטים אחרים של תמונה. זה כולל גם דוגמה שמראה כיצד להשתמש בספרייה עם React.

קל לצלם צילומי מסך עם JavaScript

אין שיטת JavaScript מקורית ליצירת תמונות מאלמנטים של HTML, או צילום מסך של ה-DOM. עם זאת, בעזרת ספריות ושירותים כמו html-to-image, זה הופך למשימה קלה.

ישנן דרכים אחרות להשגת תוצאות דומות, כגון ספריית wkhtmltoimage. אתה יכול להשתמש בכלי קוד פתוח זה כדי לצלם צילומי מסך של דף אינטרנט שלם.