Is there an issue with Three.js canvas.toDataURL() function in Chromium browsers?

After performing a recent system upgrade, I noticed some issues with Chromium. One of them was a delay in loading my Three.js r85 project, which was resolved after upgrading to Three.js r90.

However, I encountered a new problem with toDataUrl() not working, even with the latest version of Three.js. Here is a CodePen by Shiva Saxena that functions well in Firefox but not in Chromium:

renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });

I also attempted an alternative method without setting preserveDrawingBuffer to true and calling toDataUrl() right after rendering the scene, but it failed as well.

renderer.render( scene, camera );
var screenshot = renderer.domElement.toDataURL();

Is anyone else facing this issue? Are there other ways to render a texture onto an image without using toDataUrl()?

Chromium Version 65.0.3325.146 (Developer Build) (64-bit)

javascriptthree.jshtml5-canvaschromiumarchlinux

Answer №1

Although Chrome is a good browser, it is recommended to utilize a proxy canvas for saving the image as indicated in the comments.

const myCanvas = document.createElement('canvas');
myCanvas.width = 512;
myCanvas.height = 512;
const ctx = myCanvas.getContext('2d');
ctx.drawImage(editor.renderer.domElement, 0, 0, myCanvas.width, myCanvas.height);

myCanvas.toBlob(function(blob){
    blob.name = 'test.png';
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = 'test.png';
    downloadLink.click();
});

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

React.Children does not reveal the presence of any offspring

I am looking to implement react-native-maps-clustering in my project. However, this library only accepts markers that are direct children of the maps component. An example of how it should be structured: <MapView> <Marker/> <Marker/> ...

javascriptreactjsreact-nativereduxreact-redux

Website experiencing issues with moderating Facebook comments

I recently added a Facebook comments box to my website in the footer. Although it is visible, I am unable to moderate it. Furthermore, the comments are not showing up in the comments queue panel at https://developers.facebook.com/tools/comments. I am us ...

javascripthtmlangularjsfacebookfacebook-graph-api

Include a new route in the Vue.js router dynamically during runtime

I am in the process of developing an application and I want to incorporate extensions into it. These extensions will have their own Vue components, views, and routes. Instead of rebuilding the entire app, I am looking for a way to dynamically add these new ...

javascriptvue.jsvuejs2vue-routerweb-deployment

Distinguishing the Mouse Wheel Event

Take a look at this code snippet: <script type="text/javascript"> var scrollFunc = function(e) { var direct = 0; e = e || window.event; if(e.wheelDelta) {//IE/Opera/Chrome userMouse(e.wheelDelta); } else if(e.detail) {//Fire ...

javascriptjquerymouseeventmousewheel

Troubleshooting: jQuery Drop event is not triggering

I am attempting to transfer links (.link) from one div (.folder) to another, but the drop event is not triggering. To make all .link divs droppable areas, I have disabled the default behavior in the dragenter and dragover events. Here is the code snippet: ...

javascriptjqueryhtml

Is there a possibility of Node.js being blocked during the processing of large file uploads?

Is it possible for Node.js to become blocked during the processing of large file uploads? Due to Node.js having only one thread, is there a risk that other requests will be blocked while handling large file uploads? If this is the case, what is the best ...

javascriptnode.js

The Firebase Authentication module encountered an uncaught error: [$injector:modulerr]

I encountered a challenge while developing a small task for Gmail user login and logout using Firebase authentication. The issue in my code is Uncaught Error: [$injector:modulerr] The libraries I included are: <script src='https://cdn.firebase.co ...

javascriptangularjsfirebasefirebase-authenticationangularfire

Refreshing forms in Angular 2

I am attempting to retrieve values from forms using the submit event. However, I am encountering difficulty resetting those forms later on. I am using an id called "myForm" and an onclick function to try and achieve this. <form (Submit)="addMarker()" i ...

javascripthtmlcssangularjs

Mastering the Art of Resizing Video Controls: A

https://i.stack.imgur.com/jTgap.png https://i.stack.imgur.com/Exf6Y.png On the initial screenshot, the video player displays normal controls. However, on the same website with identical CSS, the second video player shows different control settings. // C ...

javascripthtmlcss

An issue has arisen: It seems that properties of null cannot be accessed, particularly the 'toISOString' property

After upgrading the dependencies in my package.json to their latest versions, I encountered an error while accessing a page that calls this data. Given that the dependencies were outdated by at least 2 years or more, I suspect the issue lies with the updat ...

javascriptjsonangularweb

applying a timeout for the .on(load) event

My goal is to dynamically load images using .on('load') in the script below: .on('load', function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken i ...

javascriptjquery

When sketching both spheres and lines simultaneously, they appear in separate locations on the canvas

Looking at the image here, my attempt is to create an illustration showing two tubes with spheres on each side. However, I noticed that the spheres in the second tube are inaccurately positioned far apart from each other. Just for clarification, the sphe ...

3dthree.js

Deciphering the Results of AngularJS

What sets 'template' apart from 'templateUrl' in AngularJS directive? index.html: <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <title>Index</title> </he ...

javascriptangularjsangularjs-directive

When placed in a conditional, the type of the body variable changes from a string to undefined

Unexpectedly, the final if block fails to retain the value of the body variable and transforms it into undefined. While the console log statement just before the block correctly displays the type of the variable as a "string", during the condition check an ...

javascriptnode.jsexpressmongoose

Guide to combining an object with an array object in Vue.js

After receiving an API response's data, [{id: 1, name:"Test 1"},{id: 2, name:"Test 2"}] I am working on my component .vue file. ... created() { const request = axios.get("***api_url***").then(response => { ...

javascriptvue.jsvuejs2

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Wondering how to accomplish this: I've designed an HTML5 homepage and I'm looking to display a message to visitors, such as "Dear visitor, I am currently on vacation from....", in the form of a memo or sticky note positioned in the top right cor ...

javascriptjquerycsshtml

The retrieval of JSON file using $.GetJson() is unsuccessful from local directory

There is a basic autocomplete program in place. The data entered in the textbox is successfully captured while debugging, however, the GetJson() function fails to retrieve the JSON file, causing the program to malfunction. Here's the relevant code sn ...

javascriptjqueryhtmljsonajax

Manipulating child classes using jQuery

I am struggling to display an X icon next to a tab on my page when the tab is clicked, but I am facing difficulties in toggling its visibility. The issue arises when trying to access the span element within the tabs. $('.tabs .tab-links a').on(& ...

javascriptjqueryhtmlcss

Creating a tree-view in Vue.js that includes clickable components which trigger a Vue.js modal to open up

I have a unique requirement to implement a tree-view feature in Vue-JS for displaying JSON data. However, I need to enhance this by triggering a VueJS modal when any of the data fields in the JSON view are clicked. I have explored various npm modules that ...

javascriptnpmvue.js

Adding items to objects in MongoDB and Node.js using Mongoose

In the model I have created, there is a structure like this: subjects: { Mathematics: { questionsanswered: [ "x+2=3, solve for x please", "How do you write an expression that represents all quadrantal angles?" ], ques ...

javascriptnode.jsmongodbexpressmongoose