Wakefield's Daily Tips

Blog
,
71

Saving screenshots

I haven’t managed to get this working online, but locally you can take a screenshot with win.getMovieFrame() and then save it with the name file name as the rest of your data files using win.saveMovieFrames(thisExp.dataFileName+'.png'). You might want to have the get code in Each Frame but make sure it doesn’t run every frame.

The closest I’ve got with saving a screenshot online is saveScreenshot("screenshot"); where saveScreenshot is defined in Before Experiment as:

function saveScreenshot(filename, scale = 0.5) {
    let canvas = document.querySelector('canvas'); // Get the PsychoJS canvas

    // Create a smaller offscreen canvas
    let scaledCanvas = document.createElement('canvas');
    let ctx = scaledCanvas.getContext('2d');
    
    // Set new dimensions (50% of original size)
    scaledCanvas.width = canvas.width * scale;
    scaledCanvas.height = canvas.height * scale;
    
    // Draw original canvas onto the smaller canvas
    ctx.drawImage(canvas, 0, 0, scaledCanvas.width, scaledCanvas.height);

    // Convert to Base64 PNG
    let imageData = scaledCanvas.toDataURL("image/png");
    let base64Data = imageData.split(',')[1]; // Remove metadata

    // Store Base64 image data in experiment file
    psychoJS.experiment.addData(filename, imageData);

    console.log("Screenshot saved at reduced resolution:", filename);
}

This should save the base64 image data into a cell in the CSV file at 50% resolution to reduce the amount of data. However, when I pasted the resulting code into a web browser, I got a white rectangle. Suggestions welcome.