Three.js截圖並下載的大坑

最近作有關three.js的動畫，想經過截圖而後在新的頁面打開截圖，而且想把圖片下載到本地，連環坑很ok👌嗯。這個必需要記下來！

先來看看普通頁面的截圖

一開始看到這個，徹底沒思路，普通的html標籤要怎麼才能變成一張圖？？？，其實嘞，目前的截圖方案都並非咱們理解的那種截圖，無論是使用canvas仍是svg，其實都是作了轉化，可是這兩種方法都不在這詳細描述了，有興趣的能夠看看這篇，說的很詳細了（canvas VS svg 截圖），然鵝，確定是有工具的啦，那就是git上開源的 html2canvas，有好多小星星呀，而且使用超簡單，可是原理也是將html的標籤從新繪製到canvas中，其中也有不少不能解決的問題，好比什麼文本陰影啊，豎版圖片啊之類的，還有！！動畫元素截取不出來！！！！！,截屏出來是白屏。

怎麼解決嘞

• 爲何是白屏：

截取three.js 渲染的圖，若是直接將輸出的canvas變成圖片是沒法獲取的，由於在獲取以前渲染界面是清空的狀態，因此須要在渲染以後清空以前將渲染的內容轉換爲圖片，即將場景的內容渲染一遍並將渲染的內容轉爲圖片數據。

• 解決方案：

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的碼，因此咱們要將渲染的canvas轉化爲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。

完成啦

源碼在這