Add download image button

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

includes/GlModelHooks.php

@@ -65,7 +65,8 @@ class GlModelHooks {
      * @return bool|void True to continue default processing or false to abort for custom processing
      */
     public static function onAlternateEditPreview( $editor, $content, string &$previewHTML, ?ParserOutput &$parserOutput ) {
-        $file = MediaWikiServices::getInstance()->getRepoGroup()->findFile($editor->getTitle());
+        $title = $editor->getTitle();
+        $file = MediaWikiServices::getInstance()->getRepoGroup()->findFile($title);
         if (!$file || $file->getMimeType() !== 'model/gltf-binary') {
             return true;
         }
@@ -91,10 +92,16 @@ class GlModelHooks {
             'onclick' => 'readyDelHotspot()'
         );
 
+        $dldButtonAttr = array(
+            'class' => 'preview-button MakeImage',
+            'onclick' => 'downloadImage("' . $title . '")'
+        );
+
         $addHsButton = array(
             Html::rawElement('button',$addButtonAttr,'Add a new hotspot'),
             Html::rawElement('button',$readButtonAttr,'Update hotspots'),
-            Html::rawElement('button',$delButtonAttr,'Delete hotspot')
+            Html::rawElement('button',$delButtonAttr,'Delete hotspot'),
+            Html::rawElement('button',$dldButtonAttr,'Download image')
         );
 
         $previewHTML = Html::rawElement('div',NULL,$previewViewer.implode($addHsButton));

modules/glmv.js

@@ -392,4 +392,29 @@ enableViewer = function() {
     previewMv[0].disableTap = false
     previewMv[0].toggleAttribute('camera-controls', true)
     return previewMv[0]
+}
+
+/**
+ * Use the model viewer methods to get image 
+ * of current view and download
+ * 
+ * @param {string} defName wiki page name to use as base file name
+ */
+downloadImage = function(defName) {
+    const imgName = defName.substring(5).split('.')[0]
+    const mView = $('model-viewer')[0]
+
+    const dlA = document.createElement('a')
+    dlA.setAttribute('download',imgName + '.png')
+
+    const reader = new FileReader()
+    reader.addEventListener("load", () => {
+        dlA.setAttribute('href',reader.result)
+        dlA.click()
+    },{once: true})
+
+    mView.toBlob(null, null, true)
+        .then(imgBlob => {
+            reader.readAsDataURL(imgBlob)
+        })
 }