淺談Three.js截圖并下載的大坑
最近做有關(guān)three.js的動(dòng)畫，想通過截圖然后在新的頁面打開截圖，并且想把圖片下載到本地，連環(huán)坑很ok:ok_hand:嗯。這個(gè)必須要記下來！
先來看看普通頁面的截圖
一開始看到這個(gè)，完全沒思路，普通的html標(biāo)簽要怎么才能變成一張圖？？？，其實(shí)嘞，目前的截圖方案都并不是我們理解的那種截圖，不管是使用canvas還是svg，其實(shí)都是做了轉(zhuǎn)化，但是這兩種方法都不在這詳細(xì)描述了，有興趣的可以看看這篇，說的很詳細(xì)了（canvas VS svg 截圖），然鵝，肯定是有工具的啦，那就是git上開源的 html2canvas ，有好多小星星呀，并且使用超簡(jiǎn)單，但是原理也是將html的標(biāo)簽重新繪制到canvas中，其中也有很多不能解決的問題，比如什么文本陰影啊，豎版圖片啊之類的，還有！！動(dòng)畫元素截取不出來?。。。?！,截屏出來是白屏。
怎么解決嘞
為什么是白屏：
截取three.js 渲染的圖，如果直接將輸出的canvas變成圖片是無法獲取的，因?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);//這樣就可以查看截出來的圖片了
}
劃重點(diǎn)：
其實(shí)就是相當(dāng)于渲染一幀，并把這一幀輸出 而如果需要截某個(gè)部分的圖片，只需要將相機(jī)變一下，換成自己想要范圍，并渲染一幀再截屏出來。 優(yōu)點(diǎn)非常明顯， 這樣相當(dāng)于重新渲染一幀，即便是截取某個(gè)很小的部分，截取的圖片也是很清晰的。
截完圖之后嘞
我想要的呢是將截的圖展示在新的頁面上，可是生成的圖片并不是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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS獲取字符串實(shí)際長度(包含漢字)的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄狫S獲取字符串實(shí)際長度(包含漢字)的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
基于JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的事件觸發(fā)器
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的事件觸發(fā)器,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
js jquery 獲取某一元素到瀏覽器頂端的距離實(shí)現(xiàn)方法
今天小編就為大家分享一篇js jquery 獲取某一元素到瀏覽器頂端的距離實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果
這篇文章主要介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果,需要的朋友可以參考下2015-12-12
隨鼠標(biāo)移動(dòng)的時(shí)鐘非常漂亮遺憾的是只支持IE
這篇文章主要介紹了隨鼠標(biāo)移動(dòng)的時(shí)鐘非常漂亮遺憾的是只支持IE,需要的朋友可以參考下2014-08-08
js截取video視頻某一幀做封面的簡(jiǎn)單案例(附完整代碼)
最近碰到一個(gè)需求,要求獲取video視頻某一幀做封面圖片,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于js截取video視頻某一幀做封面的簡(jiǎn)單案例,需要的朋友可以參考下2024-04-04
使用json對(duì)象轉(zhuǎn)化為key,value的對(duì)象數(shù)組
這篇文章主要介紹了使用json對(duì)象轉(zhuǎn)化為key，value的對(duì)象數(shù)組方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
在Chrome DevTools中調(diào)試JavaScript的實(shí)現(xiàn)
這篇文章主要介紹了在Chrome DevTools中調(diào)試JavaScript的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
JavaScript中setInterval()和setTimeout()的用法及區(qū)別
這篇文章主要給大家介紹了關(guān)于JavaScript中setInterval()和setTimeout()用法及區(qū)別的相關(guān)資料,Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛,它們都用來處理延時(shí)和定時(shí)任務(wù),需要的朋友可以參考下2023-11-11
contenteditable可編輯區(qū)域設(shè)置換行實(shí)現(xiàn)技巧實(shí)例
這篇文章主要為大家介紹了contenteditable可編輯區(qū)域設(shè)置換行實(shí)現(xiàn)技巧實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-01-01