split saved piskel in chunks when serialization fails

src/js/utils/FrameUtils.js

@@ -221,8 +221,9 @@
         var row = layout[i];
         for (var j = 0 ; j < row.length ; j++) {
           context.clearRect(0, 0 , frameWidth, frameHeight);
-          context.drawImage(image, frameWidth * i, frameHeight * j, frameWidth, frameHeight, 0, 0, frameWidth, height);
+          context.drawImage(image, frameWidth * i, frameHeight * j,
-          var frame = pskl.utils.FrameUtils.createFromCanvas(canvas, 0, 0, frameWidth, height);
+                            frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
+          var frame = pskl.utils.FrameUtils.createFromCanvas(canvas, 0, 0, frameWidth, frameHeight);
           chunkFrames.push({
             index : layout[i][j],
             frame : frame

src/js/utils/serialization/Serializer.js

@@ -1,6 +1,21 @@
 (function () {
   var ns = $.namespace('pskl.utils.serialization');
 
+  var areChunksValid = function (chunks) {
+    return chunks.every(function (chunk) {
+      return chunk.base64PNG;
+    });
+  };
+
+  var createColumnLayout = function (size, offset) {
+    var layout = [[]];
+    for (var i = 0 ; i < size ; i++) {
+      layout[0].push(i + offset);
+    }
+
+    return layout;
+  };
+
   ns.Serializer = {
     serialize : function (piskel) {
       var serializedLayers = piskel.getLayers().map(function (l) {
@@ -26,8 +41,32 @@
         opacity : layer.getOpacity(),
         frameCount : frames.length
       };
-      var renderer = new pskl.rendering.FramesheetRenderer(frames);
+
-      layerToSerialize.base64PNG = renderer.renderAsCanvas().toDataURL();
+      var chunks = [];
+      while (!areChunksValid(chunks)) {
+        // Chunks are invalid, increase the number of chunks by one, and chunk the frames array.
+        var frameChunks = pskl.utils.Array.chunk(frames, chunks.length + 1);
+
+        // Reset chunks array.
+        chunks = [];
+
+        // After each chunk update the offset by te number of frames that have been processed.
+        var offset = 0;
+        for (var i = 0 ; i < frameChunks.length ; i++) {
+          var chunkFrames = frameChunks[i];
+          var renderer = new pskl.rendering.FramesheetRenderer(chunkFrames);
+          chunks.push({
+            // renderAsCanvas with 1 column
+            base64PNG : renderer.renderAsCanvas(1).toDataURL(),
+            // create a layout array, containing the indices of the frames extracted in this chunk
+            layout : createColumnLayout(chunkFrames.length, offset),
+          });
+
+          offset += chunkFrames.length;
+        }
+      }
+
+      layerToSerialize.chunks = chunks;
       return JSON.stringify(layerToSerialize);
     }
   };