Downloading PNG implemented

Animation.js

@@ -121,10 +121,8 @@ function newAnimation () {
         browserCanvas.height = 1
       }
 
-      /* Gif Recording */
-
+      /* Media Recording */
       if (areWeRecording === true) {
-        console.log('ADDING FRAME')
         mediaRecorder.capture(browserCanvas)
       }
 

Canvas.js

@@ -194,15 +194,37 @@ function newCanvas () {
     }
   }
 
-  function checkGifRecording (event) {
-    if (event.keyCode === 121) { //  F10
+  function checkMediaRecording (event) {
+    if ((event.ctrlKey === true || event.metaKey === true)) {
+      let constructorParams
+      switch (event.keyCode) {
+        case 118: { //  F7
+          downloadCanvas('Superalgos.image.capture')
+          return
+          break
+        }
+        case 119: { //  F8
+          constructorParams = { format: 'png', name: 'Superalgos.image.capture' }
+          break
+        }
+        case 120: { //  F9
+          constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 12, name: 'Superalgos.video.capture'}
+          break
+        }
+        case 121: { //  F10
+          constructorParams = { format: 'webm', framerate: 12, name: 'Superalgos.video.capture' }
+          break
+        }
+        default: return
+      }
+
       if (areWeRecording === false) {
-        mediaRecorder = new CCapture({ format: 'webm', framerate: 12, name: 'Superalgos.video' })
+        console.log('RECORDING', constructorParams.format)
+        mediaRecorder = new CCapture(constructorParams)
         mediaRecorder.start()
         areWeRecording = true
-        console.log('RECORDING')
       } else {
-        console.log('SAVING')
+        console.log('SAVING', constructorParams.format)
         areWeRecording = false
         mediaRecorder.stop()
         mediaRecorder.save()
@@ -210,7 +232,7 @@ function newCanvas () {
     }
   }
   function onKeyDown (event) {
-    checkGifRecording(event)
+    checkMediaRecording(event)
 
     let nodeOnFocus = canvas.designerSpace.workspace.getNodeThatIsOnFocus()
     if (nodeOnFocus !== undefined) {

Utilities.js

@@ -92,6 +92,23 @@ function downloadText (filename, text) {
   document.body.removeChild(element)
 }
 
+function downloadCanvas (filename) {
+  let data = browserCanvas.toDataURL('image/png', 1)
+  /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
+  data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream')
+
+  /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
+  data = data.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=' + filename + '.png')
+
+  let element = document.createElement('a')
+  element.setAttribute('href', data)
+  element.setAttribute('download', filename + '.PNG')
+  element.style.display = 'none'
+  document.body.appendChild(element)
+  element.click()
+  document.body.removeChild(element)
+};
+
 function transformThisPoint (point, container) {
     /* We make the point relative to the current frame */