Error message here!

Hide Error message here!


Error message here!


Hide Error message here!


Error message here!



three.js Create images in canvas create images in canvas

The front end of CAI Xukun's study 2021-01-13 16:29:49 阅读数:19 评论数:0 点赞数:0 收藏数:0

The first is the easiest way :

1  threeBox.render();// a key It's black when you get the picture
3 let src=threeBox.renderer.domElement.toDataURL();// Will be selected canvas Convert to base64 code
4 let a = document.createElement("a"); // Generate a a Elements 
5 let event = new MouseEvent("click"); // Create a click event 
6 = "photo"; // Set picture name 
7 a.href = src; // The generated URL Set to a.href attribute 
8 a.dispatchEvent(event); // Trigger a Click event for Download the pictures 



Corresponding three.js:

renderer = new WebGLRenderer({ antialias: true, alpha: true});

notes : Render the scene and camera before taking the screenshot , It doesn't refresh the screen in real time , What caused us to take a screenshot is blank


Corresponding canvas Method :canvas.toDataURL(); // obtain base64 Encoding format picture address


notes : If it's ordinary canvas, Directly through canvas.toDataURL() Capture screenshots

The second method :

1 renderer = new WebGLRenderer({
2 antialias: true,
3 alpha: true,
4 preserveDrawingBuffer :true
5 })
7 renderer.domElement.toDataURL();
preserveDrawingBuffer :

Turn on in the render preserveDrawingBuffer :true, Buffer protection - Whether to save in buffer manually clear or override , The default is false.

After opening , The buffer image will not be updated and cleared , You can cut down the pattern you want .

But the problem is obvious , That's when animation or post rendering content increases , Your picture will get very messy , The content is constantly superimposed ,

So I suggest you use the first method , The way to say it , Just to let you know more about .

Got base64:



 Download the screenshot :



Copyright statement
In this paper,the author:[The front end of CAI Xukun's study],Reprint please bring the original link, thank you