小編給大家分享一下Three.js截圖并下載的坑有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),咸寧企業(yè)網(wǎng)站建設(shè),咸寧品牌網(wǎng)站建設(shè),網(wǎng)站定制,咸寧網(wǎng)站建設(shè)報(bào)價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,咸寧網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

先來看看普通頁面的截圖

一開始看到這個，完全沒思路，普通的html標(biāo)簽要怎么才能變成一張圖？？？，其實(shí)嘞，目前的截圖方案都并不是我們理解的那種截圖，不管是使用canvas還是svg，其實(shí)都是做了轉(zhuǎn)化，但是這兩種方法都不在這詳細(xì)描述了，有興趣的可以看看這篇，說的很詳細(xì)了（canvas VS svg 截圖），然鵝，肯定是有工具的啦，那就是git上開源的 html2canvas ，有好多小星星呀，并且使用超簡單，但是原理也是將html的標(biāo)簽重新繪制到canvas中，其中也有很多不能解決的問題，比如什么文本陰影啊，豎版圖片啊之類的，還有?。赢嬙亟厝〔怀鰜恚。。。。?截屏出來是白屏。

怎么解決嘞

為什么是白屏：

截取three.js 渲染的圖，如果直接將輸出的canvas變成圖片是無法獲取的，因?yàn)樵讷@取之前渲染界面是清空的狀態(tài)，所以需要在渲染之后清空之前將渲染的內(nèi)容轉(zhuǎn)換為圖片，即將場景的內(nèi)容渲染一遍并將渲染的內(nèi)容轉(zhuǎn)為圖片數(shù)據(jù)。

解決方案：

shot(){
   let image = new Image();
   renderer.render(scene, camera);//renderer為three.js里的渲染器，scene為場景 camera為相機(jī)

   let imgData = renderer.domElement.toDataURL("image/jpeg");//這里可以選擇png格式j(luò)peg格式
   image.src = imgData;
   document.body.appendChild(image);//這樣就可以查看截出來的圖片了
}

劃重點(diǎn)：

其實(shí)就是相當(dāng)于渲染一幀，并把這一幀輸出 而如果需要截某個部分的圖片，只需要將相機(jī)變一下，換成自己想要范圍，并渲染一幀再截屏出來。 優(yōu)點(diǎn)非常明顯， 這樣相當(dāng)于重新渲染一幀，即便是截取某個很小的部分，截取的圖片也是很清晰的。

截完圖之后嘞

我想要的呢是將截的圖展示在新的頁面上，可是生成的圖片并不是base64的碼，所以我們要將渲染的canvas轉(zhuǎn)化為base64的圖片,toDataURL可以直接做到，然后展示在新窗口就好啦。

function debugBase64(base64URL){
  let win = window.open();
  win.document.write('<image id="IframeReportImg" src="' + base64URL + '" frameborder="0"  allowfullscreen ></image>');
  }

圖片下載

還是基于瀏覽器的功能去操作的

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

其中的imgUrl就是我們之前轉(zhuǎn)好的碼，也就是

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

這里的imgData。

完成啦

以上是“Three.js截圖并下載的坑有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：Three.js截圖并下載的坑有哪些-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://chinadenli.net/article20/dchojo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站策劃、建站公司、網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)