浅谈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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
js 轮播效果实例分享
Dec 28 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 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 set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
公司财务管理制度
2015/08/04 职场文书
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android