Browse Source

graphics

graphics
Cailean Finn 3 months ago
parent
commit
ad6b22e43d
  1. 44
      public/js/main.js

44
public/js/main.js

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

Loading…
Cancel
Save