浅谈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 相关文章推荐
angularjs实现与服务器交互分享
Jun 24 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
async/await优雅的错误处理方法总结
Jan 30 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
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
关于Django外键赋值问题详解
2017/08/13 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
秘书岗位职责
2013/11/18 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
办理房产证委托书
2014/09/18 职场文书
员工教育培训协议书
2014/09/27 职场文书
教师学期个人总结
2015/02/11 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
五年级数学教学反思
2016/02/16 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书