浅谈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高级程序设计
Dec 29 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 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
php 数组使用详解 推荐
2011/06/02 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
js实现数组转换成json
2015/06/26 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Python中tell()方法的使用详解
2015/05/24 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
审计工作个人的自我评价
2013/12/25 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
清洁工个人工作总结
2015/03/05 职场文书
采购内勤岗位职责
2015/04/13 职场文书
员工表扬信怎么写
2015/05/05 职场文书