Ако искате да направите екранна снимка на част или цялата си уеб страница с помощта на JavaScript, може да се окажете блокирани. Създаването на изображение от HTML елемент може да изглежда като предизвикателство, тъй като няма директен начин да го направите в JavaScript.

За щастие, това не е невъзможна задача и всъщност е доста лесно с подходящите инструменти. Използвайки библиотеката html към изображение, създаването на изображения на DOM възли е толкова просто, колкото едно извикване на функция.

Как работи html към изображение?

The html към изображение библиотека създава изображение под формата на URL адрес на данни base64. Поддържа няколко изходни формата, включително PNG, JPG и SVG. За да извърши това преобразуване, библиотеката използва този алгоритъм:

  1. Създайте клонинг на целевия HTML елемент, неговите деца и всички прикачени псевдоелементи.
  2. Копирайте стила за всички клонирани елементи и вградете стила в ред.
  3. Вградете съответните уеб шрифтове, ако има такива.
  4. Вградете всички налични изображения.
    5. instagram viewer
  5. Конвертирайте клонирания възел в XML и след това SVG.
  6. Използвайте SVG, за да създадете URL адрес на данни.

Предупреждения и ограничения

Въпреки че html към изображение е страхотна библиотека, тя не е перфектна. Той има няколко предупреждения, а именно:

  • Библиотеката няма да работи в Internet Explorer или Safari.
  • Ако HTML, който се опитвате да конвертирате, включва опетнен елемент на платното, библиотеката ще се провали. Като MDN обяснява, включването на неодобрени от CORS данни във вашия елемент canvas ще го опетни.
  • Тъй като браузърите поставят ограничения върху максималния размер на URL адреса с данни, има ограничения за размера на HTML кода, който библиотеката може да конвертира.

Използване на библиотеката

За да изпробвате библиотеката, първото нещо, което трябва да направите, е да създадете директория на проекта на вашата локална машина. След това инсталирайте html-to-image в тази директория, като използвате мениджърът на пакети npm. Ето командата на терминала, за да го инсталирате:

npm Инсталирай--запазване на html към изображение

Трябва също така да инсталирате пакет за JavaScript, за да улесните малко използването на библиотеката. The esbuild bundler може да помогне за опаковането на възлови модули в уеб-съвместими скриптове.

npm Инсталирай esbuild

Това е всичко, което трябва да инсталирате. След това създайте файл, наречен index.html във вашата директория и го обслужвайте с уеб сървър по ваш избор. Поставете следния код в index.html:

<!doctype html>
<html lang="en">
<глава>
<мета charset="UTF-8">
<мета име="прозорец за изглед"
 съдържание="ширина=ширина на устройството, мащабируем потребител=не, начален мащаб=1.0, максимален мащаб=1.0, минимален мащаб=1.0">
<мета http-equiv="X-UA-съвместим" съдържание="т.е.=ръб">
<заглавие>Документ</title>
<стил>
 .colorful-div {
 подложка: 3 rem;
 цвят: бял;
 фоново изображение: линеен градиент (надясно, жълто, червенолилаво);
 рамка: 1px плътно черно;
 марж: 1 rem auto;
 размер на шрифта: 3 rem;
 семейство шрифтове: курсив;
 }
</style>
</head>
<тяло>
<div клас="колоритен-разр">
 аз'ще бъда на екранна снимка!
</div>
<div клас="дълъг текст">
 аз'm пример за достатъчно многословен параграф, който
 илюстрира, че правенето на екранни снимки в JavaScript е
 наистина много лесно поради следните причини:
<ул>
<ли>Причина 1</li>
<ли>Причина 2</li>
<ли>Причина 2</li>
</ul>
</div>
<скрипт src="out.js"></script>
</body>
</html>

Този код създава два елемента на страницата: div с градиентен фон и малко текст и неподреден списък в друг div. След това ще напишете JavaScript, за да конвертирате тези елементи в изображения. Поставете следния код в нов файл, наречен script.js:

импортиране * като htmlToImage от "html към изображение";
const elems = ['.colorful-div', '.дълъг текст']


елементи.за всеки((elem, ind) => {
конст възел = документ.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. The документация от html към изображение съдържа инструкции как да генерирате други формати на изображения. Той също така включва пример, показващ как да използвате библиотеката с React.

Правенето на екранни снимки с JavaScript е лесно

Няма собствен JavaScript метод за създаване на изображения от HTML елементи или правене на екранни снимки на DOM. Въпреки това, с помощта на библиотеки и услуги като html-to-image, това става лесна задача.

Има и други начини за постигане на подобни резултати, като например библиотеката wkhtmltoimage. Можете да използвате този инструмент с отворен код, за да направите екранни снимки на цяла уеб страница.