Three.js屏幕截图和大坑下载. .

我最近做了一个关于three.js的. 我想拍摄一个屏幕截图，然后在新页面上打开该屏幕截图. 我想在本地下载图片. 这必须写下来！

我一开始就看到了three.js 下载，但我一点都不知道. 普通的html标签如何变成图片？ ？ ？实际上，当前的屏幕截图不是我们了解的那种屏幕截图. 无论是canvas还是svg，它们实际上都已转换，但是这里没有详细描述这两种方法. 如果您有兴趣，可以看一下这篇文章，非常详细（canvas VS svg屏幕截图），但是鹅必须有工具，即git上的开源html2canvas，有很多小星星，而且使用超级很简单，但原理也是html. 标签被重新绘制到画布中，并且还有许多无法解决的问题，例如什么文字阴影three.js 下载，垂直图像等等！ !!元素不能被拦截！ !! !! !! !!屏幕截图为空白.

截获three.js渲染的图像. 如果直接将输出画布转换为图像，则该画布不可用. 由于渲染接口在获取之前是空的，因此需要在渲染后清空之前将渲染的内容转换为图像，即，一次渲染场景的内容并将渲染的内容转换为图像数据.

shot(){
          let image = new Image();
          renderer.render(scene, camera);//renderer为three.js里的渲染器，scene为场景 camera为相机
          let imgData = renderer.domElement.toDataURL("image/jpeg");//这里可以选择png格式jpeg格式
          image.src = imgData;
          document.body.appendChild(image);//这样就可以查看截出来的图片了
}

实际上，这等效于渲染框架并输出该框架

如果需要拍摄特定部位的照片，只需将相机更改为所需的范围，然后渲染一帧然后拍摄屏幕截图.

优势非常明显. 这等效于重新渲染框架. 即使捕获了一小部分，捕获的图像也非常清晰.

我想要的是在新页面上显示屏幕截图，但是生成的图像不是base64代码，因此我们需要将渲染的画布转换为base64图像，toDataURL可以直接执行此操作，然后将其显示在一个新窗口.

function debugBase64(base64URL){
       let win = window.open();
       win.document.write('<image id="IframeReportImg" src="' + base64URL  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen ></image>');
     }

操作基于浏览器功能

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

imgUrl是我们之前转换的代码，即

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

这是imgData.

源代码在这里

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-154558-1.html