JFIF  x x C         C     "        } !1AQa "q2#BR$3br %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz        w !1AQ aq"2B #3Rbr{ gilour

File "download.blade.php"

Full Path: /home2/yvrgircc/public_html/ariseskilltech.com/resources/views/curriculum/certificate/download.blade.php
File size: 6.74 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!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>