快捷導(dǎo)航

淺談Three.js截圖并下載的大坑

更新時(shí)間：2019年11月01日 08:27:38 作者：Ahuuu

這篇文章主要介紹了Three.js截圖并下載的大坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近做有關(guān)three.js的動(dòng)畫，想通過(guò)截圖然后在新的頁(yè)面打開(kāi)截圖，并且想把圖片下載到本地，連環(huán)坑很ok:ok_hand:嗯。這個(gè)必須要記下來(lái)！

先來(lái)看看普通頁(yè)面的截圖

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

怎么解決嘞

為什么是白屏：

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

解決方案：

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

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

劃重點(diǎn)：

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

截完圖之后嘞

我想要的呢是將截的圖展示在新的頁(yè)面上，可是生成的圖片并不是base64的碼，所以我們要將渲染的canvas轉(zhuǎn)化為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就是我們之前轉(zhuǎn)好的碼，也就是

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

這里的imgData。

完成啦

源碼在這

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

淺談Three.js截圖并下載的大坑

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具