
本文通过真实的demo演示案例给大家展示如何使用JS获取本地音乐文件的封面图、文件名及时长等信息。

本文演示了如何纯前端对MP3、WAV、OGG等格式音频进行剪辑、剪裁、剪切、复制、播放以及上传等处理,使用Web Audio API,有完整的代码,还有在线demo演示页面,即插即用,希望本文内容可以对你的工作有所帮助。
![]()
可能有小伙伴并不知道,在网页中,我们直接Ctrl+V也是能够上传图片的。诶?真有这么厉害?没错,就是这么厉害!要不进去瞅瞅,现成的源代码,高保真的demo,包你分分钟学会这种姿势,哦,不,知识!
![]()
就在数月前,一个前端HTML字符信息转Base64的需求,我是毫不犹豫去找了个开源的base64.js,根据文档上语法一使用,嘿,数据准确,功能良好。当时弄完还洋洋得意,以为是个完美的解决。
结果,今天发现,尼玛原来浏览器很早就有了原生的JS Base64加密解密方法,显然,上面这种洋洋得意的做法完全就是瞎子点灯——白费蜡!究竟是什么方法呢?有没有什么使用上的坑呢?点击进去一起一看究竟吧~
这两天晚上在家自己做了个可以传图,可以写台词的GIF表情图生成器。可以使用提供的模板,也可以自己传图制作,关键是纯前端实现的,这个有点厉害了,有兴趣可以进来看看。
所谓文本类文件,指MIME Type为text/*文件,例如,CSS文件(text/stylesheet),JS文件(text/javascript),HTML文件(text/html),txt文本(text/plain)等等。
在现代浏览器下,我们可以直接对这些文件进行处理,无论是通过type=file表单元素还是从桌面拖拽到网页中都是可以的……
很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像,就会遇到因为图片大小限制而不能上传的窘境,不得不对图片进行再处理,而这种体验其实非常不好的。如果可以在前端进行压缩,就不会有这种尺寸限制的问题,自然用户体验就可以大大提升,非常具有价值!
图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。
随着HTML5发展和现代浏览器的占比越来越高,我们其实也可以在前端直接进行图片的合成。优点在于,响应更快,体验更好;如果是和文字进行合成,我们可以利用客户端字体,视觉展现效果更丰富;同时展示和合成全部都是前端完成,因此更利于维护。