1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<?php add_action('admin_head', 'my_custom_fonts'); function my_custom_fonts() { echo '<style> table.form-table.meta_box { direction:ltr !important; } #certificate-builder { position: relative; display: block; min-width: 100%; min-height: 800px; direction: ltr; } </style>'; } add_action('wp_footer', 'greenbackend_custom_code'); add_filter('the_content','add_signature', 1); function add_signature($text) { global $post; if(($post->post_type == 'certificate')) $text .= '<div class="signature"><a id="btnExport" href="#"><img src="https://cdn.printfriendly.com/buttons/printfriendly-pdf-button.png" /></a></div>'; return $text; } function greenbackend_custom_code() { if ( get_post_type( get_the_ID() ) == 'certificate' ) { ?> <script src="https://unpkg.com/html2canvas@1.0.0-rc.5/dist/html2canvas.js"></script> <script> $("#btnExport").on('click', function () { $('#certificate').prepend("<h1 class='noprint'>جاري المعالجة....</h1>"); var element = $(".certificate"); window["html2canvas"](element, { onrendered: (canvas) => { dataSrc = canvas.toDataURL("image/png"); $('#certificate').prepend("<h1>جاري المعالجة....</h1>"); // dataSrc = dataSrc.replace("data:image/png;base64,",""); $('#certificate').html('<img src="'+dataSrc+'" alt="">'); $('#certificate').prepend("<h1 class='noprint'>يمكنك تحميل الشهادة من <a href='"+dataSrc+"' alt=''>هنا</a> | <a href='window.print()' onclick='window.print()' alt=''>طباعة</a></h1>"); } }); }); </script> <style> @media print{ .noprint{ display:none; } } @media print { @page { size: A4 landscape; } h1#pf-title { display: none; } #pf-body #pf-src,div#scrolltop { display: none; } } @page { size: A4 landscape; } header.fix { display: none; } section#title { display: none; } footer { display: none; } </style> <?php //if is true } } |
In case you want to enable download, you could use the following
1 2 3 4 5 6 7 8 |
<?php $imagedata = base64_decode($_POST['imgdata']); $filename = md5(uniqid(rand(), true)); //path where you want to upload image $file = $_SERVER['DOCUMENT_ROOT'] . '/certs/'.$filename.'.png'; $imageurl = 'https://www.example.org/certs/'.$filename.'.png'; file_put_contents($file,$imagedata); echo $imageurl; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<script> $("#btnExport").on('click', function () { $('#certificate').prepend("<h1>جاري المعالجة....</h1>"); var element = $(".certificate"); window["html2canvas"](element, { onrendered: (canvas) => { dataSrc = canvas.toDataURL("image/png"); $('#certificate').prepend("<h1>جاري المعالجة....</h1>"); // dataSrc = dataSrc.replace("data:image/png;base64,",""); $('#certificate').html('<img src="'+dataSrc+'" alt="">'); var imgdata = dataSrc.replace(/^data:image\/(png|jpg);base64,/, ""); //ajax call to save image inside folder $.ajax({ url: 'https://www.example.org/save_image.php', data: { imgdata:imgdata }, type: 'post', success: function (response) { console.log(response); $('#certificate').prepend("<h1 class='noprint'>يمكنك تحميل الشهادة من <a href='"+response+"' alt=''>هنا</a> | <a href='window.print()' onclick='window.print()' alt=''>طباعة</a></h1>"); //$('#image_id img').attr('src', response); } }); } }); }); </script> <style> @media print { @page { size: A4 landscape; } .noprint{ display:none; } </style> |