Tips for capturing a screenshot of a Three JS CSS 3D Renderer?

I am working on a Three JS application with a CSS 3D Renderer, using the html2canvas library to capture screenshots of the document.body.

Unfortunately, the issue arises when the screenshot doesn't include the CSS 3D Renderer.

Below is the code snippet used for capturing the screenshot:

window.addEventListener("keyup", function(e){

    //Listen for the 'P' key press
    if(e.which !== 80) return;

    html2canvas(document.body, {
      onrendered: function(canvas) {
        var img = canvas.toDataURL();
        window.open( img , 'Final' );
      }
    });
});

To see a demonstration, please visit:

and

Note: Press the 'P' key to take a screenshot (Disable any pop-up blockers).

Thank you

Answer â„–1

This new functionality was made possible by using the helpful file saver JavaScript library

 <script type="text/javascript" src="js/filesaver.js"></script>

window.addEventListener("keyup", function(e){

    //Check for 'P' key press
    if(e.which !== 80) return;
    Render.domElement.toBlob(function(blob) {
        saveAs(blob, "Final");
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance the appearance of Ionic popups

Can someone help me with resizing a pop up? I've been struggling to get it right. This is the popup template in question: <ion-view> <ion-content scroll="false" class=""> test </ion-content> < ...

Struggling to resolve the issue while deploying a Next.js application on Netlify. The error seems to be stemming from the import of an image and its

I attempted to eliminate the code on line 4 and line 15 in index.js, then deployed it on Netlify. The functionality is working correctly, but the image is not displaying as desired. However, when I try to modify the code with just lines 4 and 15 included, ...

What is the process for configuring the zoom control feature?

When utilizing react-google-maps, I am encountering issues with changing the zoom position as per the following code snippet: <GoogleMap defaultZoom={5} defaultCenter={{ lat: 22.845625996700075, lng: 78.9629 }} options={{ gestureHandling:'greedy ...

Ways to showcase every resource from an API in React JS

I need help with adding code to display products along with their images from an API in my existing code. Can someone assist me with this? import React, {useState, useEffect} from 'react' import "bootstrap/dist/css/bootstrap.min.css" im ...

Adjust the size of an input field in jquery or javascript based on user input

Ensure that an input text box can only contain a maximum of 13 numbers, but if the user enters a 14th number as a decimal point, then allow up to 16 numbers. HTML: <input type="text" maxlength="15" onkeyup="checkCurrency(this)"/> Script: func ...

How can we determine when a row has been modified while using a list of floating-left LIs?

Check out this list of products for an example: I have a function that is triggered on document ready which goes through each item in the list and adjusts the height of a span wrapping the image to ensure uniform spacing. My question is, is it possible f ...

What steps should be taken to activate eslint caching?

I'm attempting to activate eslint caching by following the instructions in this section of the user guide The command I am using is npm run lint -- --cache=true, and the lint script simply executes a script that spawns esw (which itself runs eslint â ...

How can I connect the Bootstrap-datepicker element with the ng-model in AngularJS?

Below is the html code for the date field : <div class='form-group'> <label>Check out</label> <input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" plac ...

How can you preselect an item in Vuetify's item group?

When attempting to preselect an item from a vuetify item-group, I discovered that it works with strings but not with objects. The vuetify documentation shows using a string array as the item list for the item-group, which functions correctly. However, whe ...

Place an entire element within another element, rather than just inserting its inner HTML contents

I'm currently exploring the use of jQuery to generate HTML content with ease. My intention was to create <div><span>Alice</span></div> using the code shown below, but instead, I ended up with <div>[object Object]</div& ...

I'm unable to locate my test text on the main page of my React web application

At the moment, my React application is running on port 3000 using npm start. I have made the decision to incorporate MySQL into the web app by executing yarn add express mysql. In order for this to work, I have configured server.js to listen on port 3001 ...

What is the purpose of including production dependencies in the package.json file of a React/Redux frontend project?

Recently delving into the world of React.js+Redux, I've noticed that many frontend projects utilize npm as their package manager. Take, for instance, this project - counter. Within this project, there exists a package.json file. Upon examining its c ...

Ajax does not pass any data to PHP script

I am facing an issue while trying to send a variable from JavaScript and then use it in my PHP code. I have created a function for this purpose but when I execute it, the functionality doesn't work as expected. Can someone help me troubleshoot this pr ...

JavaScript and jQuery radio button matrix group implementation

I'm feeling completely lost when it comes to solving this problem. My task is to create a matrix of radio buttons with columns labeled 1 to 3 and rows labeled A to C. A B C 1 (o) (o) (o) 2 (o) (o) (o) 3 (o) (o) (o) <tabl ...

The success body of Jquery Ajax is not receiving any response

Despite trying various methods, I have been unsuccessful in retrieving the desired result from my jQuery ajax success function. I have included the jQuery library, but to no avail. Any guidance on where I may be going wrong in my code would be greatly appr ...

Using React to establish communication between sibling components

Hey there, I'm a beginner in React and recently created a small application with a single form to practice my skills. This app includes 4 components apart from the App.js file. My main challenge is getting my Checkbox.js component to communicate with ...

Expansive Carousel Feature with Ng Bootstrap

In my Angular 5 application, I am utilizing the Carousel component from "@ng-bootstrap/ng-bootstrap": "^1.1.2". I am trying to display pictures in full screen but when I press F11, the image appears like this. I am unsure of which CSS properties to apply ...

Implementing a function as the `data-*` attribute for an element in Angular 6

I have a question about my component.ts file: import { Component, OnInit, AfterViewInit, ElementRef, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; import { environment } from '../../../enviro ...

Leveraging Iron Router for implementing query variable settings

Utilizing Iron Router, I aim to call a page and filter the results based on the route. In this scenario, the application facilitates the creation of items. Each item contains an array that can encompass zero to multiple tags: Item: { _id: <assigned b ...

What is the best way to deactivate ng-repeat using a button in AngularJS?

How can I disable the apply button once it has been clicked by the user in a list of stores based on services? I am using ng-repeat to display the listing. Additionally, how can I write an apply function to disable a particular service once it has been app ...