تبدیل HTML به عکس و دانلود آن با JQuery
در این مقاله به یک موضوع جالب می پردازیم، تبدیل Html به عکس و دانلود آن با JQuery و پلاگین html2canvas. شاید به عنوان توسعه دهنده بخواهید دکمه ای را در نظر بگیرید که کاربر با فشردن آن قسمتی از صفحه HTML را به عنوان عکس ذخیره کند. این کار با پلاگین html2canvas در سمت کاربر بدون فشار بر روی منابع سرور بسیار ساده امکان پذیر است.
مراحل برای ارائه صفحه HTML به تصویر به صورت زیر است :
- اضافه کردن فایل های HTML2Canvas jQuery
- اضافه کردن HTML markup
- کد jQuery برای دکمه تبدیل HTML به Canvas
- ذخیره عکس
نحوه تبدیل بخشی از صفحه HTML به JPEG یا PNG
در گام اول نیاز داریم CDN کتابخانه های JQuery و HTML2Canvas را به پروژه اضافه کنیم. در زیر آدرس هر دو را برای شما قرار دادیم:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js
بررسی کدهای HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
</head>
<body id="myElement">
<div id="header">
<h1>تبدیل Html به Canvas - آموزشگاه آنلاین فرازگر</h1>
</div>
<div id="previewImage"></div>
<p>
این یک توضیح نمونه است که میخواهیم HTML را به عکس تبدیل کنیم.
</p>
<p style="text-align:center;">
this is sample of htmltocanvas
</p>
<p id="centerpersiantext">
متن وسط چین شده فارسی
</p>
<div id="prw"></div>
<button id="btnSave">پیش نمایش</button>
<button id="btn-Convert-Html2Image">save </button>
</body>
</html>
- به تگ body ای دی myElement داده شده است. میخواهیم محتوای این تگ HTML را به عنوان عکس ذخیره کنیم.
- در خط 26 یک تگ با آی دی prw تعریف کرده ایم، قرار است پیش نمایش در اینجا به نمایش در بیاید.
- در خط 28 یک دکمه تعیرف کردیم که قرار است پیش نمایش عکس را به ما نمایش دهد.
بررسی کدهای Jquery
با کلیک بر روی دکمه عکسی از محتویات تگ body با ای دی myElement به نمایش در می آید.
در کد زیر به آدرس های تگ ها در صفحه Html دقت کنید.
$("#btnSave").click(function() {
html2canvas($("#myElement"), {
onrendered: function(canvas) {
theCanvas = canvas;
$("#prw").html(canvas);
},
});
});
نتیجه را مشاهده کنید:
رفع مشکل به هم ریختگی فونت فارسی در تبدیل HTML به عکس
بصورت پیش فرض اگر فونت قارسی را با دستور text-align:center; وسط چین کنید حروف آن در عکس پیش نمایش به هم نمی چسبد. برای حل این مشکل باید خاصیت text-align حتما بر روی center باشد.
text-align: right;
اما برای اینکه هم متن ما وسط چین باشد و همراه مشکل به هم ریختگی را نداشته باشیم می توانیم از ترفند زیر استفاده کنیم:
#centerpersiantext{
width:30%;
margin-right: auto;
margin-left: auto;
display:block;
}
از اینکه ما را در مقاله تبدیل HTML به عکس همراهی کردید از شما سپاس گذاریم.
