Merge pull request #5282 from BOINC/dpa_cert_download

Web: add "download as PNG" button to certificates.
BOINC · Jun 22, 2023 · ea15a00 · ea15a00
2 parents d7f5aef + 1444dab
commit ea15a00
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 10 deletions.
diff --git a/html/inc/cert.inc b/html/inc/cert.inc
@@ -51,4 +51,32 @@ function credit_string($credit, $bolden) {
     return " $lbold$cobbs Cobblestones$rbold of computation ($ops $unit floating-point operations)";
 }
 
+// show button to download certificate as PNG
+function show_download_button() {
+    echo '
+        <p>
+        <button id="export" style="margin-top: 5px;">Download as PNG image</button>
+        <script src="html2canvas.min.js"></script>
+        <script type="text/javascript">
+            const $btn = document.querySelector("#export");
+            const $toExport = document.querySelector("#certificate");
+            const $myCanvas = document.querySelector("#canvasDiv");
+
+            $btn.addEventListener("click", () => {
+                html2canvas($toExport)
+                .then(canvas => {
+                    var dataURL = canvas.toDataURL("image/png");
+                    downloadImage(dataURL, "certificate_image.");
+                });
+            });
+
+            function downloadImage(data, filename = "untitled.png") {
+                var a = document.createElement("a");
+                a.href = data;
+                a.download = filename;
+                a.click();
+            }
+        </script>
+    ';
+}
 ?>
diff --git a/html/inc/user.inc b/html/inc/user.inc
@@ -187,7 +187,6 @@ function show_user_stats_private($user) {
         }
         $x .= ' &middot; <a href="cert_all.php">'.tra("Cross-project").'</a>';
         row2(tra("Certificate"), $x);
-        row2(tra("Stats on your cell phone"), url_base()."userw.php?id=$user->id");
     }
 }
 

diff --git a/html/user/cert1.php b/html/user/cert1.php
@@ -1,7 +1,7 @@
 <?php
 // This file is part of BOINC.
 // http://boinc.berkeley.edu
-// Copyright (C) 2008 University of California
+// Copyright (C) 2023 University of California
 //
 // BOINC is free software; you can redistribute it and/or modify it
 // under the terms of the GNU Lesser General Public License
@@ -16,6 +16,10 @@
 // You should have received a copy of the GNU Lesser General Public License
 // along with BOINC.  If not, see <http://www.gnu.org/licenses/>.
 
+// show certificate for user: signup date, credit, FLOPs
+// Projects can customize this:
+// https://github.com/BOINC/boinc/wiki/WebConfig#certificate-related-constants
+
 require_once("../inc/util.inc");
 require_once("../inc/cert.inc");
 
@@ -39,7 +43,7 @@
 $font = "\"Optima,Lucida Bright,Times New Roman\"";
 
 echo "
-    <table width=900 height=650 border=$border cellpadding=20><tr><td>
+    <table id=\"certificate\" width=900 height=650 border=$border cellpadding=20><tr><td>
     <center>
     <table width=700 border=0><tr><td>
     <center>
@@ -93,6 +97,7 @@
     ";
 }
 echo "
-</td><tr></table>
+</td><tr></table></table>
 ";
+show_download_button();
 ?>
diff --git a/html/user/cert_all.php b/html/user/cert_all.php
@@ -1,7 +1,7 @@
 <?php
 // This file is part of BOINC.
 // http://boinc.berkeley.edu
-// Copyright (C) 2008 University of California
+// Copyright (C) 2023 University of California
 //
 // BOINC is free software; you can redistribute it and/or modify it
 // under the terms of the GNU Lesser General Public License
@@ -16,6 +16,10 @@
 // You should have received a copy of the GNU Lesser General Public License
 // along with BOINC.  If not, see <http://www.gnu.org/licenses/>.
 
+// show certificate listing join time and credit across all projects
+// Projects can customize this:
+// https://github.com/BOINC/boinc/wiki/WebConfig#certificate-related-constants
+
 require_once("../inc/util.inc");
 require_once("../inc/cert.inc");
 require_once("../inc/user.inc");
@@ -57,7 +61,7 @@ function show_proj($p) {
 }
 
 echo "
-    <table width=900 height=650 border=$border cellpadding=20><tr><td>
+    <table id=\"certificate\" width=900 height=650 border=$border cellpadding=20><tr><td>
     <center>
     <table width=700 border=0><tr><td style=\"background-position:center; background-repeat:no-repeat\" background=https://boinc.berkeley.edu/logo/boinc_fade_600.png>
     <center>
@@ -92,6 +96,7 @@ function show_proj($p) {
     </td>
 ";
 echo "
-</td><tr></table>
+</td><tr></table></table>
 ";
+show_download_button();
 ?>
diff --git a/html/user/cert_team.php b/html/user/cert_team.php
@@ -1,7 +1,7 @@
 <?php
 // This file is part of BOINC.
 // http://boinc.berkeley.edu
-// Copyright (C) 2014 University of California
+// Copyright (C) 2023 University of California
 //
 // BOINC is free software; you can redistribute it and/or modify it
 // under the terms of the GNU Lesser General Public License
@@ -16,6 +16,11 @@
 // You should have received a copy of the GNU Lesser General Public License
 // along with BOINC.  If not, see <http://www.gnu.org/licenses/>.
 
+// show a web-based certificate for a team,
+// showing the team's creation date and total credit in this project.
+// Projects can customize this:
+// https://github.com/BOINC/boinc/wiki/WebConfig#certificate-related-constants
+
 require_once("../inc/util.inc");
 require_once("../inc/cert.inc");
 
@@ -45,7 +50,7 @@
 $font = "\"Optima,Lucida Bright,Times New Roman\"";
 
 echo "
-    <table width=900 height=650 border=$border cellpadding=20><tr><td>
+    <table id=\"certificate\" width=900 height=650 border=$border cellpadding=20><tr><td>
     <center>
     <table width=700 border=0><tr><td>
     <center>
@@ -99,6 +104,7 @@
     ";
 }
 echo "
-</td><tr></table>
+</td><tr></table></table>
 ";
+show_download_button();
 ?>
diff --git a/html/user/html2canvas.min.js b/html/user/html2canvas.min.js