浅谈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 相关文章推荐
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jQuery聚合函数实例
May 21 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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
2006/12/23 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python中xrange和range的区别
2014/05/13 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
详解python编译器和解释器的区别
2019/06/24 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
python怎么对数字进行过滤
2020/07/05 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
报到证办理个人委托书
2014/10/06 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
初中作文评语
2014/12/25 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers