Shulou(Shulou.com)06/03 Report--

Editor to share with you the Three.js screenshot and download the pit, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

First, let's take a look at the screenshot of an ordinary page.

When I saw this at first, I had no idea at all. How can an ordinary html tag become a picture? In fact, the current screenshot scheme is not the kind of screenshot we understand, whether using canvas or svg, are actually transformed, but these two methods are not described in detail here. If you are interested, you can take a look at this article in detail (canvas VS svg screenshot). However, goose, there must be tools, that is, the open source html2canvas on git, which has a lot of small stars, and uses ultra-simple. But the principle is to redraw html tags into canvas, and there are a lot of problems that can't be solved, such as text shadows, vertical images, and so on! Animation elements can not be intercepted! The screenshot comes out with a blank screen.

How to solve it?

Why the white screen:

If you capture the image rendered by three.js, it is impossible to obtain the output canvas directly, because the rendering interface is empty before acquisition, so you need to convert the rendered content into an image before emptying after rendering, that is, rendering the content of the scene again and converting the rendered content into image data.

Solution:

Shot () {let image = new Image (); renderer.render (scene, camera); / / renderer is the renderer in three.js, scene is the scene camera is camera let imgData = renderer.domElement.toDataURL ("image/jpeg"); / / you can choose png format jpeg format image.src = imgData; document.body.appendChild (image); / / so you can view the captured image}

Highlight:

In fact, it is equivalent to rendering a frame, and output this frame, and if you need to capture a part of the picture, you just need to change the camera to your desired range, and render a frame and then take a screenshot. The advantage is very obvious, this is equivalent to re-rendering a frame, even if you intercept a very small part, the intercepted picture is very clear.

After the screenshot is finished.

What I want is to display the screenshot on the new page, but the generated image is not base64 code, so we need to convert the rendered canvas into base64 image, toDataURL can do it directly, and then display it in the new window.

Function debugBase64 (base64URL) {let win = window.open (); win.[ XSS _ clean] ('');}

Picture download

It is still based on the function of the browser.

Function downloadImage (imgUrl) {let a = $("). Attr (" href ", imgUrl) .attr (" download "," img.png ") .appendTo (" body "); a [0] .click (); a.remove ();}

The imgUrl is the code we converted before, that is,

Let imgData = renderer.domElement.toDataURL ("image/jpeg"); /

ImgData here.

Done.

The above is all the contents of the article "what are the pits that Three.js screenshots and downloads have?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.