خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه تبدیل HTML به تصویر در جاوا اسکریپت

ارشیا یوسفی ادیب ۱ آبان, ۱۴۰۱ 3 min read

گرفتن یک عکس فوری از یک عنصر HTML می تواند به فرآیند طراحی شما کمک کند و گاهی اوقات بخشی از برنامه نهایی شما باشد. با یک کتابخانه، کار آسانی است.

اگر می خواهید با استفاده از جاوا اسکریپت از قسمتی یا تمام صفحه وب خود اسکرین شات بگیرید، ممکن است گیر بیفتید. ایجاد یک تصویر از یک عنصر HTML می تواند یک چالش به نظر برسد، زیرا هیچ راه مستقیمی برای انجام آن در جاوا اسکریپت وجود ندارد.

خوشبختانه، این یک کار غیرممکن نیست و در واقع با ابزارهای مناسب بسیار آسان است. با استفاده از کتابخانه html-to-image، ساخت تصاویر گره های DOM به سادگی یک فراخوانی یک تابع است.

html-to-image چگونه کار می کند؟

کتابخانه html-to-image تصویری را در قالب URL data base64 تولید می کند. از چندین فرمت خروجی از جمله PNG، JPG و SVG پشتیبانی می کند. برای انجام این تبدیل، کتابخانه از این الگوریتم استفاده می کند:

  1. یک کلون از عنصر HTML هدف، فرزندان آن و هر شبه المان پیوست شده ایجاد کنید.
  2. یک ظاهر طراحی شده را برای همه عناصر شبیه سازی شده کپی کنید و یک ظاهر طراحی را به صورت درون خطی جاسازی کنید.
  3. در صورت وجود فونت های وب مربوطه را جاسازی کنید.
  4. هر تصویر موجود را جاسازی کنید.
  5. گره کلون شده را به XML و سپس SVG تبدیل کنید.
  6. از SVG برای ایجاد URL داده استفاده کنید.

هشدارها و محدودیت ها

حتی اگر html-to-image یک کتابخانه عالی است، کامل نیست. چند اخطار دارد که عبارتند از:

  • این کتابخانه در اینترنت اکسپلورر یا سافاری کار نخواهد کرد.
  • اگر HTML که می‌خواهید تبدیل کنید شامل یک عنصر بوم آلوده باشد، کتابخانه با شکست مواجه می‌شود. همانطور که MDN توضیح می دهد، گنجاندن داده های غیر تایید شده توسط CORS در عنصر بوم شما باعث لکه دار شدن آن می شود.
  • از آنجایی که مرورگرها برای حداکثر اندازه URL داده محدودیت هایی قائل می شوند، محدودیت هایی در اندازه HTML که کتابخانه می تواند تبدیل کند وجود دارد.
مطلب مرتبط:   نحوه مدیریت مسیریابی در Vue با روتر Vue

با استفاده از کتابخانه

برای امتحان کردن کتابخانه، اولین کاری که باید انجام دهید این است که یک فهرست پروژه در ماشین محلی خود ایجاد کنید. سپس، html-to-image را در آن دایرکتوری با استفاده از مدیریت بسته npm نصب کنید. در اینجا دستور ترمینال برای نصب آن آمده است:

npm install --save html-to-image

همچنین باید یک باندلر جاوا اسکریپت را نصب کنید تا استفاده از کتابخانه کمی آسان تر شود. باندلر esbuild می تواند به بسته بندی ماژول های گره در اسکریپت های سازگار با وب کمک کند.

npm install esbuild

این تمام چیزی است که برای نصب نیاز دارید. در مرحله بعد، یک فایل به نام index.html در دایرکتوری خود ایجاد کنید و آن را با یک وب سرور مورد نظر خود سرو کنید. کد زیر را در index.html قرار دهید:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.colorful-div {
padding: 3rem;
color: white;
background-image: linear-gradient(to right, yellow, rebeccapurple);
border: 1px solid black;
margin: 1rem auto;
font-size: 3rem;
font-family: cursive;
}
</style>
</head>
<body>
<div class="colorful-div">
I&aposm going to be in a screenshot!
</div>
<div class="long-text">
I&aposm an example of a sufficiently verbose paragraph that
illustrates that taking screenshots in JavaScript is
really very easy, for the following reasons:
<ul>
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 2</li>
</ul>
</div>

<script src="out.js"></script>
</body>
</html>

این کد دو عنصر در صفحه ایجاد می کند: یک div با پس زمینه گرادیان، و مقداری متن و یک لیست نامرتب در داخل div دیگری. در مرحله بعد، جاوا اسکریپت را برای تبدیل این عناصر به تصویر می نویسید. کد زیر را در یک فایل جدید به نام script.js قرار دهید:

import * as htmlToImage from "html-to-image";

const elems = [&apos.colorful-div&apos, &apos.long-text&apos]

elems.forEach((elem, ind) => {
const node = document.querySelector(elem)

htmlToImage.toPng(node)
.then(function (dataUrl) {
let img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error(&aposoops, something went wrong!&apos);
console.log(error)
});
})

این کد چند کار را انجام می دهد:

  • کتابخانه 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 باید در مرورگر شما چگونه باشد:

یک صفحه نمایشی برای html-to-image

اگرچه کپی ها دقیقاً مشابه نسخه های اصلی هستند، اما در واقع عناصر تصویر هستند. شما می توانید با باز کردن ابزارهای توسعه دهنده خود و بررسی آنها، این موضوع را تأیید کنید.

این کتابخانه با فریمورک های جاوا اسکریپت نیز کار می کند. مستندات html-to-image حاوی دستورالعمل هایی در مورد نحوه تولید فرمت های تصویر دیگر است. همچنین شامل مثالی است که نحوه استفاده از کتابخانه با React را نشان می دهد.

گرفتن اسکرین شات با جاوا اسکریپت آسان است

هیچ روش جاوا اسکریپت بومی برای ایجاد تصاویر از عناصر HTML یا گرفتن اسکرین شات از DOM وجود ندارد. با این حال، با کمک کتابخانه ها و خدماتی مانند html-to-image، این کار به یک کار آسان تبدیل می شود.

راه های دیگری نیز برای دستیابی به نتایج مشابه وجود دارد، مانند کتابخانه wkhtmltoimage. می توانید از این ابزار منبع باز برای گرفتن اسکرین شات از یک صفحه وب کامل استفاده کنید.

Tags: