浅谈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 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
Javascript学习笔记4 Eval函数
Jan 11 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 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
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP通用检测函数集合
2006/11/25 PHP
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
PHP代码优化的53个细节
2014/03/03 PHP
Yii使用技巧大汇总
2015/12/29 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
Javascript引用指针使用介绍
2012/11/07 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
python简单操作excle的方法
2018/09/12 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python 追踪except信息方式
2020/04/25 Python
如何将json数据转换为python数据
2020/09/04 Python
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
面试后的感谢信范文
2014/02/01 职场文书
部队万能检讨书
2014/02/20 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
团组织关系介绍信
2019/06/24 职场文书
python tkinter实现定时关机
2021/04/21 Python
logback如何自定义日志存储
2021/08/30 Java/Android
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL