Ако желите да направите снимак екрана дела или целе ваше веб странице користећи ЈаваСцрипт, можда ћете се заглавити. Прављење слике од ХТМЛ елемента може изгледати као изазов, јер не постоји директан начин да се то уради у ЈаваСцрипт-у.

Срећом, ово није немогућ задатак и, у ствари, прилично је једноставан са одговарајућим алатима. Користећи библиотеку хтмл-то-имаге, прављење слика ДОМ чворова је једноставно као позив једне функције.

Како функционише хтмл-то-имаге?

Тхе хтмл-то-имаге библиотека производи слику у облику басе64 УРЛ адресе података. Подржава неколико излазних формата, укључујући ПНГ, ЈПГ и СВГ. Да би извршила ову конверзију, библиотека користи овај алгоритам:

  1. Направите клон циљног ХТМЛ елемента, његове деце и свих приложених псеудо-елемената.
  2. Копирајте стил за све клониране елементе и уградите стил у линију.
  3. Уградите релевантне веб фонтове, ако их има.
  4. Уградите све присутне слике.
  5. Конвертујте клонирани чвор у КСМЛ, а затим у СВГ.
  6. Користите СВГ да направите УРЛ података.

Упозорења и ограничења

instagram viewer

Иако је хтмл-то-имаге одлична библиотека, није савршена. Има неколико упозорења, наиме:

  • Библиотека неће радити у Интернет Екплорер-у или Сафарију.
  • Ако ХТМЛ који покушавате да конвертујете укључује укаљани елемент платна, библиотека неће успети. Као МДН објашњава, укључивање података који нису одобрени од стране ЦОРС-а у вашем елементу платна ће га покварити.
  • Пошто прегледачи постављају ограничења на максималну величину УРЛ-а података, постоје ограничења за величину ХТМЛ-а који библиотека може да конвертује.

Коришћење библиотеке

Да бисте испробали библиотеку, прва ствар коју треба да урадите је да креирате директоријум пројекта на вашој локалној машини. Затим инсталирајте хтмл-то-имаге у тај директоријум користећи нпм менаџер пакета. Ево команде терминала за инсталирање:

нпм инсталирај--саве хтмл-то-имаге

Такође би требало да инсталирате ЈаваСцрипт пакет да бисте олакшали коришћење библиотеке. Тхе есбуилд бундлер може помоћи у паковању модула чворова у скрипте компатибилне са вебом.

нпм инсталирај есбуилд

То је све што треба да инсталирате. Затим креирајте датотеку под називом индек.хтмл у вашем директоријуму и послужите га са веб сервером по вашем избору. Ставите следећи код у индек.хтмл:

<!доцтипе хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="УТФ-8">
<мета наме="виевпорт"
 цонтент="видтх=девице-видтх, усер-сцалабле=не, инитиал-сцале=1.0, макимум-сцале=1.0, минимал-сцале=1.0">
<мета хттп-екуив="Кс-УА-Цомпатибле" цонтент="тј=ивица">
<наслов>Документ</title>
<стил>
 .цолорфул-див {
 паддинг: 3рем;
 бела боја;
 позадинска слика: линеарни градијент (надесно, жута, ребекапурпурна);
 ивица: 1пк пуна црна;
 маргина: 1рем ауто;
 величина фонта: 3рем;
 фонт-фамили: цурсиве;
 }
</style>
</head>
<тело>
<див цласс="шарено-див">
 И'м ћу бити на снимку екрана!
</div>
<див цласс="дугачак текст">
 И'м пример довољно опширног пасуса који
 илуструје да је прављење снимака екрана у ЈаваСцрипт-у
 заиста врло лако, из следећих разлога:
<ул>
<ли>Разлог 1</li>
<ли>Разлог 2</li>
<ли>Разлог 2</li>
</ul>
</div>
<скрипт срц="оут.јс"></script>
</body>
</html>

Овај код креира два елемента на страници: див са позадином градијента, и нешто текста и неуређену листу унутар другог дива. Затим ћете написати ЈаваСцрипт да бисте ове елементе претворили у слике. Ставите следећи код у нову датотеку под називом сцрипт.јс:

увоз * као хтмлТоИмаге из "хтмл-то-имаге";
цонст елемс = ['.цолорфул-див', '.лонг-тект']


елемс.за сваки((елем, инд) => {
конст чвор = документ.куериСелецтор (елем)
хтмлТоИмаге.тоПнг(чвор)
 .онда(функција (датаУрл) {
дозволити имг = Нова Слика();
 имг.срц = датаУрл;
документ.тело.аппендЦхилд(имг);
 })
 .улов(функција(грешка){
 цонсоле.еррор('Упс! Нешто није у реду!');
конзола.лог (грешка)
 });
})

Овај код ради неколико ствари:

  • Увози библиотеку хтмл-у-имаге.
  • Креира низ направљен од ЦСС селектора који циља на два елемента.
  • Прави ПНГ слику у облику УРЛ-а података из сваког елемента низа.
  • Прави имг ознаку и поставља њен срц атрибут на УРЛ података, стварајући копије слике два елемента.

Сада користите есбуилд да генеришете датотеку у пакету (оут.јс) који индек.хтмл референцира покретањем следећег у вашем терминалу:

 ./ноде_модулес/.бин/есбуилд сцрипт.јс --бундле --оутфиле=оут.јс

У овом тренутку, ево како би индек.хтмл требало да изгледа у вашем претраживачу:

Иако копије изгледају потпуно исто као и оригинали, оне су заправо елементи слике. Ово можете потврдити путем отварање алата за развој и прегледа их.

Ова библиотека такође ради са ЈаваСцрипт оквирима. Тхе хтмл-то-имаге документација садржи упутства о томе како да генеришете друге формате слика. Такође укључује пример који показује како да користите библиотеку са Реацт-ом.

Прављење снимака екрана помоћу ЈаваСцрипт-а је једноставно

Не постоји изворни ЈаваСцрипт метод за креирање слика од ХТМЛ елемената или прављење снимака екрана ДОМ-а. Међутим, уз помоћ библиотека и услуга попут хтмл-то-имаге, то постаје лак задатак.

Постоје и други начини за постизање сличних резултата, као што је библиотека вкхтмлтоимаге. Можете да користите ову алатку отвореног кода да направите снимке екрана целе веб странице.