183 lines
6.7 KiB
PHP
183 lines
6.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>{{ get_phrase('Download Certificate') }}</title>
|
|
<link rel="shortcut icon" href="{{ asset(get_frontend_settings('favicon')) }}" />
|
|
<script src="{{ asset('assets/frontend/default/js/jquery-3.7.1.min.js') }}"></script>
|
|
<script src="{{ asset('assets/global/html2canvas/html2canvas.min.js') }}"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<style>
|
|
html, body{
|
|
overflow-x: hidden;
|
|
}
|
|
body {
|
|
position: relative;
|
|
}
|
|
|
|
.remove-item,
|
|
.ui-resizable-handle {
|
|
display: none !important;
|
|
}
|
|
|
|
.certificate-layout-module {
|
|
left: unset !important;
|
|
top: unset !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.download-btn {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
padding: 20px 32px;
|
|
border-radius: 5px;
|
|
color: #3d9bff;
|
|
background-color: #d3e8ff;
|
|
z-index: 100;
|
|
}
|
|
|
|
.absolute-view{
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
overflow-y: auto;
|
|
z-index: 50;
|
|
width: 100%;
|
|
}
|
|
|
|
.certificate_builder_view{
|
|
width: 60%;
|
|
height: auto;
|
|
min-width: 350px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: 60px;
|
|
}
|
|
</style>
|
|
|
|
|
|
{{-- Downloadable canvas --}}
|
|
<div class="captureCertificate" id="captureCertificate">
|
|
@php
|
|
$course_duration = $certificate->course->total_duration();
|
|
$student_name = $certificate->user->name;
|
|
$course_title = $certificate->course->title;
|
|
$number_of_lesson = $certificate->course->lessons->count();
|
|
$qr_code = $qrcode;
|
|
$course_completion_date = date_formatter($certificate->created_at);
|
|
$certificate_download_date = date('d M Y');
|
|
$course_level = ucfirst($certificate->course->level);
|
|
$course_language = ucfirst($certificate->course->language);
|
|
$instructor_name = '';
|
|
|
|
foreach ($certificate->course->instructors() as $instructor) {
|
|
$instructor_name .= '<p>' . $instructor->name . '</p>';
|
|
}
|
|
|
|
$certificate_builder_content = get_settings('certificate_builder_content');
|
|
$certificate_builder_content = str_replace('{course_duration}', $course_duration, $certificate_builder_content);
|
|
$certificate_builder_content = str_replace('{instructor_name}', $instructor_name, $certificate_builder_content);
|
|
$certificate_builder_content = str_replace('{student_name}', $student_name, $certificate_builder_content);
|
|
$certificate_builder_content = str_replace('{course_title}', $course_title, $certificate_builder_content);
|
|
$certificate_builder_content = str_replace('{number_of_lesson}', $number_of_lesson, $certificate_builder_content);
|
|
$certificate_builder_content = str_replace('{qr_code}', $qr_code, $certificate_builder_content);
|
|
$certificate_builder_content = str_replace('{course_completion_date}', $course_completion_date, $certificate_builder_content);
|
|
$certificate_builder_content = str_replace('{certificate_download_date}', $certificate_download_date, $certificate_builder_content);
|
|
$certificate_builder_content = str_replace('{course_level}', $course_level, $certificate_builder_content);
|
|
$certificate_builder_content = str_replace('{course_language}', $course_language, $certificate_builder_content);
|
|
|
|
// Use regex to update the src attribute of the <img> tag with the class 'certificate-template'.
|
|
$newSrc = get_image(get_settings('certificate_template'));
|
|
$certificate_builder_content = preg_replace('/(<img[^>]*class=["\']certificate-template["\'][^>]*src=["\'])([^"\']*)(["\'])/i', '${1}' . $newSrc . '${3}', $certificate_builder_content);
|
|
@endphp
|
|
|
|
{!! $certificate_builder_content !!}
|
|
</div>
|
|
{{-- Downloadable canvas end--}}
|
|
|
|
|
|
{{-- Preview certificate --}}
|
|
<div class="absolute-view">
|
|
<div class="certificate_builder_view" id="certificate_builder_view">
|
|
{!! $certificate_builder_content !!}
|
|
</div>
|
|
</div>
|
|
{{-- Preview certificate end--}}
|
|
|
|
|
|
<a class="download-btn" href="#" onclick="setTimeout(() => renderCanvasToImage(), 500);">{{ get_phrase('Download') }}</a>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
$(function() {
|
|
var certificate_builder_view_width = $('.certificate_builder_view').width();
|
|
var certificate_layout_module = $('.certificate_builder_view .certificate-layout-module').width();
|
|
var zoomScaleValue = ((certificate_builder_view_width/certificate_layout_module)*100) - 8;
|
|
$('.certificate_builder_view .certificate-layout-module').css('zoom', zoomScaleValue+'%');
|
|
});
|
|
|
|
function renderCanvasToImage() {
|
|
|
|
var certificate_width = $('#captureCertificate > div').width();
|
|
html2canvas(document.querySelector("#captureCertificate > div"), {
|
|
allowTaint: true,
|
|
useCORS: true,
|
|
width: certificate_width,
|
|
scale: 2
|
|
}).then(canvas => {
|
|
document.querySelector("#captureCertificate").appendChild(canvas);
|
|
$("canvas").hide();
|
|
|
|
setTimeout(function() {
|
|
var canvas = document.querySelector("canvas");
|
|
downloadCanvas(canvas, "certificate.png");
|
|
}, 2000);
|
|
});
|
|
}
|
|
|
|
|
|
function downloadCanvas(canvas, filename) {
|
|
// Convert canvas to data URL
|
|
var dataUrl = canvas.toDataURL("image/png");
|
|
|
|
// Create a temporary link element
|
|
var link = document.createElement("a");
|
|
link.href = dataUrl;
|
|
link.download = filename;
|
|
|
|
// Append the link to the body
|
|
document.body.appendChild(link);
|
|
|
|
// Create a new MouseEvent and dispatch it
|
|
var event = new MouseEvent('click', {
|
|
view: window,
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
link.dispatchEvent(event);
|
|
|
|
// Remove the link from the body
|
|
document.body.removeChild(link);
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|