草庐IT

纯前端

全部标签

Potree | 前端展示点云可视化的框架

目录Potree介绍WebGL介绍OpenGLES2.0介绍HTML5Canvas介绍如何实现potreepotree支持的点云数据格式potree实现3D图片展示的示例Potree介绍Potree是一个基于WebGL的点云可视化框架,可以在网页上交互式地展示海量点云数据,同时支持颜色、透明度、大小、形状等多种可视化效果。它可以快速加载大规模点云数据,并支持多种点云数据格式,包括LAS、LAZ、PLY、OBJ、PTS等。(potree所需的数据格式)Potree基于JavaScript编写,是开源的软件,用户可以根据自己的需求进行修改和扩展。Potree不需要使用插件或其他附加软件,仅需一个支

StreamSaver.js入门教程:优雅解决前端下载文件的难题

theme:smartblue本文简介本文介绍一个能让前端优雅下载大文件的工具:StreamSaver.js⚡️StreamSaver.jsGitHub地址⚡️官方案例StreamSaver.js可用于实现在Web浏览器中直接将大文件流式传输到用户设备的功能。传统的下载方式可能导致大文件的加载时间较长或造成内存占用过大的问题,使用标签打开新页面下载文件,遇到.txt或者.mp4之类的文件可能就直接在页面展示了,不会触发下载功能。而StreamSaver.js则通过流式下载的方式解决了这些问题。StreamSaver.js将大文件拆分成小块,并在下载过程中逐块传输到硬盘,从而降低内存占用和提高下

前端最全面试题整理(持续更新)

写在前面此文章的题是同事给我发的一个PDF文档里的题,原版我也不清楚是哪里的,好像是某个培训机构的题库。题比较全,但是原版很多题的答案不是很清晰,在此基础上我重新补充了一下最近应该会持续的把这些题的答案更新完2023.2.17目录写在前面前端基础一、HTTP/HTML/浏览器P1、说一下http和https(1)http和https的基本概念(2)http和https的区别?(3)https协议的工作原理(4)https协议的优点(5)https协议的缺点2、tcp三次握手,一句话概括3、TCP和UDP的区别4、WebSocket的实现和应用(1)什么是WebSocket?(2)WebSock

前端不暴露ak/sk直接上传阿里云oss的方案

需求起因以前写过一篇文章:前端不暴露ak/sk直接上传awsS3的方案因为项目里还用到的阿里云的oss上传,就研究了阿里云是不是也有避免ak/sk泄露到前端的方案,这里也复述一下这么做的原因:常规上传方案,为避免ak/sk被用户知道,导致文件泄露、篡改,通常是前端上传文件到后端,再由后端上传到阿里云oss,参考架构:用户=>浏览器选文件=>后端服务器=>oss这个方案的问题点:链路长,上传慢,因为多了一个中间节点,时间多花一倍,既然链路长了,那么出现超时中断错误的概率就更高了;如果文件太大,后端服务器还不能接收,需要修改默认配置,比如SpringBoot默认上传最大1M,但是修改它又可能导致额

前端下载非同源文件自定义文件名方案

背景有时候我们需要点击下载一些资源如excel、pdf、ppt、图片等,并且要支持自定义下载名字。当下载链接与当前页是同源时,可以通过a标签download属性设置,比如我在a.com打开的页面下载a.pdf下载这样子同源下载的文件名就是"自定义名字.pdf"但是一般实际场景,文件资源都是有独立的资源服务器的,和主应用的域名不一致,上面的方法就不管用了。那么也没有其他方法呢?方案下载的实际原理就是前端发一个http请求去目标链接,然后资源服务器在接收请求后在responseheader里面设置content-type为文件流,和Content-Disposition,例如:Content-Ty

前端js如何实现截屏功能,插件推荐js-web-screen-shot

html2canvas读取dom结构转换成canvas,最后转成图片形式展示缺点:没有编辑功能链接:html2canvasjs-web-screen-shot大佬模仿qq截图实现的,也可以搭配webrtc实现web端远程桌面共享链接:githubgitee简单使用npminstalljs-web-screen-shot--saveimportScreenShortfrom"js-web-screen-shot";newScreenShort({ enableWebRtc:false,//是否启用webrtc,值为false则使用html2canvas来截图 loadCrossImg:true,

手把手教你写一个JSON在线解析的前端网站1

前言作为一名Android开发,经常要跟后端同事联调接口,那么总避免不了要格式化接口返回值,将其转换为清晰直观高亮的UI样式以及折叠部分内容,方便我们查看定位关键的信息。一直以来都是打开Google搜索json格式化关键字,然后选择Google推荐的前三名的网址,比如bejson网站:https://www.bejson.com/json.cn网站:https://www.json.cn/开源中国的JSON解析:https://tool.oschina.net/codeformat/json我自己搞的小网站在Google搜索上还排不上号,这里王婆卖瓜,自卖自夸一下,也分享一下子。json2.t

前端面试——如何理解this指向?

目录前言一、this在不同函数中的指向1.普通函数this指向全局对象 2.构造函数指向new这个对象3.箭头函数指向上一级作用域 4.对象函数指向这个对象5.数组中有函数,指向这个数组6.apply、call调用时指向第一个参数,没有则默认window 7.window内置对象指向window对象二、预编译1.js执行步骤2.预编译作用3.预编译步骤前言this指向真的是老生常谈的问题,在八股文当中也占据很重要的位置,面试过程中也会经常问道this指向问题,那么我们今天就来看看this指向和实践把~后面还浅讲了以下预编译~有兴趣继续往下看吧~一、this在不同函数中的指向1.普通函数this

通过java解码web前端直接预览海康威视摄像头

一:前言    最近进行项目开发时遇到了需要前端直接调用摄像头,并直接进行播放的需求。原本计划通过海康威视官网的《WEB无插件开发包V3.2》直接进行控制、交互,实现摄像头直接登录以及取流预览。但是前端人员现场驻场开发后反映各种兼容性问题频发,反正就是不能友好的进行预览播放。鉴于此我直接查询了官网上相关的sdk,然后选用了《设备网络SDK_Win64V6.1.9.4_build20220412》进行开发java版本的转码工具。整体思路是在PS流中解析出H264的裸流然后通过websocket传给前端,前端基于wfs.js进行h264的裸流播放。二:开发准备下载开发SDK开发包,并先查看和熟悉s