Export image

engine/src/base/Project.js

@@ -1762,6 +1762,130 @@ Wick.Project = class extends Wick.Base {
     }
 
 
+    /**
+     * Create a sequence of images from every frame in the project.
+     * @param {object} args - Options for generating the image sequence
+     * @param {string} imageType - MIMEtype to use for rendered image. Defaults to 'image/png'.
+     * @param {function} onProgress - Function to call for image loaded, useful for progress bars?
+     * @param {function} onFinish - Function to call when the image is loaded.
+     */
+    generateImageFile (args) {
+        let options = {};
+
+        if (args) {
+            options = {
+                ...args,
+            };
+        }
+
+        if (!options.imageType) {
+            options.imageType = 'image/png';
+        }
+        if (!options.onProgress) {
+            options.onProgress = () => {};
+        }
+        if (!options.onFinish) {
+            options.onFinish = () => {};
+        }
+        if (!options.width) {
+            options.width = this.width;
+        }
+        if (!options.height) {
+            options.height = this.height;
+        }
+
+        // console.log('generateImageFile', options);
+
+        var renderCopy = this;
+
+        console.log('renderCopy/project', renderCopy);
+
+        renderCopy.renderBlackBars = false; // Turn off black bars (removes black lines)
+
+        var oldBackgroundColor = renderCopy._backgroundColor;
+
+        renderCopy._backgroundColor = new Wick.Color('#00000000');
+
+        var oldCanvasContainer = this.view.canvasContainer;
+
+        this.history.saveSnapshot('before-gif-render');
+        this.mute();
+        this.selection.clear();
+        // this.publishedMode = 'imageSequence';
+        // this.tick();
+
+        // Put the project canvas inside a div that's the same size as the project
+        // so the frames render at the correct resolution.
+        let container = window.document.createElement('div');
+
+        container.style.width  = (options.width / window.devicePixelRatio) + 'px';
+        container.style.height = (options.height / window.devicePixelRatio) + 'px';
+        window.document.body.appendChild(container);
+        renderCopy.view.canvasContainer = container;
+        renderCopy.view.resize();
+
+        let oldZoom = renderCopy.zoom;
+
+        // Calculate the zoom needed to fit the project into the requested container width/height
+        var zoom = 1;
+        if (options.height < options.width) {
+            zoom = options.height / this.height;
+        } else {
+            zoom = options.width / this.width;
+        }
+
+        // Set the initial state of the project.
+        renderCopy.focus = renderCopy.root;
+        // renderCopy.focus.timeline.playheadPosition = 1;
+        renderCopy.onionSkinEnabled = false;
+        renderCopy.zoom = zoom / window.devicePixelRatio;
+        renderCopy.pan = {x: 0, y: 0};
+
+        // renderCopy.tick();
+
+        // We need full control over when paper.js renders,
+        // if we leave autoUpdate on, it's possible to lose frames if paper.js doesnt automatically
+        // render as fast as we are generating the images.
+        // (See paper.js docs for info about autoUpdate)
+        renderCopy.view.paper.view.autoUpdate = false;
+
+        // var frameImages = [];
+        // var numMaxFrameImages = renderCopy.focus.timeline.length;
+
+        this.resetSoundsPlayed();
+
+        // Do the image render
+        var image = new Image();
+
+        image.onload = () => {
+            // console.log('Image onload', image);
+            options.onProgress(1, 1);
+
+            // reset autoUpdate back to normal
+            renderCopy.view.paper.view.autoUpdate = true;
+
+            this.view.canvasContainer = oldCanvasContainer;
+            this.view.resize();
+
+            this.history.loadSnapshot('before-gif-render');
+            // this.publishedMode = false;
+            this.view.render();
+
+            renderCopy._backgroundColor = oldBackgroundColor;
+            renderCopy.zoom = oldZoom;
+
+            window.document.body.removeChild(container);
+
+            options.onFinish(image);
+        };
+
+        // console.log('Image src render()', image);
+        renderCopy.view.render();
+        renderCopy.view.paper.view.update();
+        image.src = renderCopy.view.canvas.toDataURL(options.imageType);
+    }
+
+
     /**
      * Create a sequence of images from every frame in the project.
      * @param {object} args - Options for generating the image sequence

engine/src/export/image/ImageFile.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2020 WICKLETS LLC
+ *
+ * This file is part of Wick Engine.
+ *
+ * Wick Engine is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Wick Engine is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Wick Engine.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Utility class for generating an image file.
+ */
+Wick.ImageFile = class {
+    /**
+     * Create a png sequence from a project.
+     * @param {Wick.Project} project - the project to create a png sequence from
+     * @param {function} callback - Function called when the file is created. Contains the file as a parameter.
+     **/
+    static toPNGFile (args) {
+        let { project, onProgress, onFinish } = args;
+
+        // console.log('ImageFile.toPNGFile', args);
+
+        // var zip = new JSZip();
+
+        let buildImage = (image) => {
+            // console.log('ImageFile.toPNGFile image', image);
+
+            var blob = Wick.ExportUtils.dataURItoBlob(image.src);
+
+            onFinish(blob);
+        };
+
+        // console.log('ImageFile.toPNGFile', project);
+
+        project.generateImageFile({
+            width: args.width,
+            height: args.height,
+            onFinish: buildImage,
+            onProgress: onProgress,
+        });
+    }
+};