graphics

public/js/main.js

@@ -16,8 +16,8 @@
 
 	let cFrames = 0;
 	let isCapturing = false;
-	const totalCFrames = 600; // Number of frames to capture
-	const zip = new JSZip(); // Create a new JSZip instance
+	let frame_array = []
+	const totalCFrames = 1200; // Number of frames to capture
 	let captureFrames = false;
 	
 	let containerW = container_element.offsetWidth
@@ -144,29 +144,33 @@
 		renderer.setSize(containerW, containerH)
 	})
 
-// Function to capture the canvas and save it as PNG data in the zip
 	function captureFrame() {
-const canvas = renderer.domElement;
-canvas.toBlob((blob) => {
-        // Add the blob to the ZIP archive
-        zip.file(`frame-${cFrames}.png`, blob);
+		renderer.domElement.toDataURL('image/png').replace("image/png", "image/octet-stream");
+		let imgData = renderer.domElement.toDataURL("image/png");
+		frame_array.push(imgData);
 		cFrames++;
 	
-        // If all frames are captured, zip and download
-        if (cFrames >= totalCFrames) {
-            zipAndDownload();
+		// If last frame, prepare the download
+		if (cFrames === totalCFrames) {
+			prepareDownload();
 		}
-    }, 'image/png');
 	}
 	
-// Function to zip and download the frames
-function zipAndDownload() {
-    zip.generateAsync({ type: 'blob' }).then(function (content) {
-        // Create a download link for the zip file
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(content);
-        link.download = 'frames.zip';
-        link.click();
+function prepareDownload() {
+	let zip = new JSZip();
+	console.log('zipping..')
+	frame_array.forEach((dataUrl, index) => {
+		let imgData = dataUrl.split(',')[1]; // Get base64 data part
+		zip.file(`frame_${index.toString().padStart(4, '0')}.png`, imgData, {base64: true});
+	});
+	console.log('zipped!')
+	zip.generateAsync({type: "blob"})
+	.then(function(content) {
+		const a = document.createElement("a");
+		a.href = URL.createObjectURL(content);
+		a.download = "frames.zip";
+		console.log('zip dl ready!')
+		a.click();
 	});
 }
 
@@ -176,11 +180,11 @@ document.addEventListener('keydown', (event) => {
       isCapturing = !isCapturing; // Toggle capturing
 
       if (isCapturing) {
+		cFrames = 0; // Reset frame counter
         captureFrames = true
         console.log('Capture started...');
       } else {
         captureFrames = false
-        cFrames = 0; // Reset frame counter
         console.log('Capture paused...');
       }
     }