Three.js截圖并下載的坑有哪些
小編給大家分享一下Three.js截圖并下載的坑有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過多達(dá)十載累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的推廣解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：三輪攪拌車等企業(yè)，備受客戶贊美。
先來(lái)看看普通頁(yè)面的截圖
一開始看到這個(gè)，完全沒思路，普通的html標(biāo)簽要怎么才能變成一張圖？？？，其實(shí)嘞，目前的截圖方案都并不是我們理解的那種截圖，不管是使用canvas還是svg，其實(shí)都是做了轉(zhuǎn)化，但是這兩種方法都不在這詳細(xì)描述了，有興趣的可以看看這篇，說(shuō)的很詳細(xì)了（canvas VS svg 截圖），然鵝，肯定是有工具的啦，那就是git上開源的 html2canvas ，有好多小星星呀，并且使用超簡(jiǎn)單，但是原理也是將html的標(biāo)簽重新繪制到canvas中，其中也有很多不能解決的問題，比如什么文本陰影啊，豎版圖片啊之類的，還有！！動(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('');
} 圖片下載
還是基于瀏覽器的功能去操作的
function downloadImage(imgUrl) {
let 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)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站標(biāo)題：Three.js截圖并下載的坑有哪些
文章網(wǎng)址：http://www.jiaotiyi.com/article/pjccph.html