1 files changed, 22 insertions, 6 deletions
diff --git a/client/index.js b/client/index.js
index 18e94da..2fc20bb 100644
--- a/client/index.js
+++ b/client/index.js
@@ -1,4 +1,8 @@
 import Tone from 'tone'
+import JSZip from 'jszip'
+import { sprintf } from 'sprintf-js'
+import FileSaver from 'file-saver'
+
 import draw from './draw'
 import keys from './lib/keys'
 import mouse from './lib/mouse'
@@ -76,18 +80,28 @@ function loadBuffer(){
   if (! pcm) return
 
   const FRAME_LENGTH = 126 * 255
-  const FRAME_OFFSET = FRAME_LENGTH
+  const FRAME_OFFSET = FRAME_LENGTH / 4
+
+  var zip = new JSZip()
+
+  var zip_folder = zip.folder("images");
 
   for (var offset = 0, count = 0, _len = pcm.length; offset < _len; offset += FRAME_OFFSET, count += 1) {
     // console.log('generating', count, offset)
-    let player = render(pcm.slice(offset, offset+FRAME_LENGTH))
+    let player = render(pcm.slice(offset, offset+FRAME_LENGTH), count, zip_folder)
     register(player, count)
     if (count > 20) break
     // break
   }
+
+  console.log('done exporting')
+  zip.generateAsync({type:"blob"}).then(function(content) {
+    console.log('saving zip')
+    FileSaver.saveAs(content, "img2pix.zip")
+  });
   play(0)
 }
-function render(pcm){
+function render(pcm, count, zip){
   const fft = spectrum.toSpectrum(pcm, sr)
   // console.log('render', fft)
   // const pcm_rev = pcm.slice().reverse()
@@ -96,6 +110,10 @@ function render(pcm){
   draw.clear()
   const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, _r, _i)
   const dataURL = canvas.toDataURL("image/png")
+  if (zip) {
+    const fn = sprintf('frame_%05d.png', count)
+    zip.file(fn, dataURL.split(',')[1], {base64: true})
+  }
   return { fft, canvas, imageData, dataURL }
 }
 function play(i) {
@@ -107,7 +125,6 @@ function play(i) {
   const { canvas, imageData } = draw.raw_spectrum(player.fft, 0, 256, 0, 256, _r, _i)
   const new_fft = spectrum.fromImageData(player.imageData, 44100, _r, _i)
   gallery.innerHTML = ''
-  gallery.appendChild(canvas)
 
   // console.log(player.fft.data, new_fft.data)
   const buf = spectrum.fromSpectrum(new_fft)
@@ -118,7 +135,6 @@ function play(i) {
 }
 function redraw(new_fft){
   const { canvas, imageData } = draw.raw_spectrum(new_fft, 0, 256, 0, 256, _r, _i)
-  gallery.appendChild(canvas)
 }
 function register(player, i){
   // console.log('register', player)
@@ -126,6 +142,6 @@ function register(player, i){
   player.canvas.addEventListener('click', () => {
     play(i)
   })
-  // gallery.appendChild(player.canvas)
+  gallery.appendChild(player.canvas)
 }
 init()