Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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
2
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 a.download = "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 

 

threeBox.render();

Corresponding three.js:

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

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

threeBox.renderer.domElement.toDataURL();

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 })
6
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