浅谈Three.js截图并下载的大坑


Posted in Javascript onNovember 01, 2019

最近做有关three.js的动画,想通过截图然后在新的页面打开截图,并且想把图片下载到本地,连环坑很ok:ok_hand:嗯。这个必须要记下来!

先来看看普通页面的截图

一开始看到这个,完全没思路,普通的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。

完成啦

源码在这

浅谈Three.js截图并下载的大坑

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
用Javscript实现表单复选框的全选功能
May 25 Javascript
jQuery 常见开发使用技巧总结
Dec 26 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
javascript操作元素的常见方法小结
Nov 13 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 #Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 #Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 #Javascript
js new Date()实例测试
Oct 31 #Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 #Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 #Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 #Javascript
You might like
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
PHP获取Exif缩略图的方法
2015/07/13 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
jquery实现图片预加载
2015/12/25 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Python yield使用方法示例
2013/12/04 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
用Python制作音乐海报
2021/01/26 Python
理工类毕业自我鉴定
2014/02/20 职场文书
村党支部公开承诺书
2014/05/29 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA