js上传前压缩
引用的 util.js
❷ js文件上传中遇到的知识点
在前端开发中，我们经常遇到上传文件的需求，以前都是用到时再找资料，但总是感觉对这块不熟，最近翻资料学习了一下，记录一下。
本文中涉及的知识点有：FileList对象，Blob对象，File对象，URL对象、FormData对象等。
本文参考 网道 ，总结而来。另外，强烈推荐网道，可以去 网道的官方 看看，是阮一峰大神发起的项目，提供互联网开发文档，文档非常全面易懂。
FileList对象，是一个像数组的对象，拥有length属性和item()方法，同时，它的每一项都是File对象。
input 标签，将type设为file，之后得到的files属性就是一个FileList对象。
blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是，blob对象用于操作二进制文件，arraybuffer用于操作内存。
blob 对象拥有2个属性和1个方法，分别是size(单位是字节)、type属性和slice()方法。
File 对象是一种特殊的Blob 对象。它在继承了size、type属性外，还同时有name、lastModified、lastModifiedDate等几个属性。
FileList 对象中的每一项都是File 对象。
拿到File 对象之后就要进行操作，下面是操作。
URL.createObjectURL(file) 允许为File 对象创建一个临时链接，
FileReader 对象的属性和方法比较多，属性中比较重要的是result，方法中比较重要的是
FileReader 对象的所有属性和方法可以参考 这里 ,这里就不再列出来了。
在早期的互联网时候，提交数据都是用表单。表单提交数据有些缺陷，例如无法校验表单数据，会刷新整个页面等。随着Ajax的兴起，页面表单提交数据慢慢退出历史舞台，但有时上传文件时我们偶尔会用到表单提交数据。
在调用构造函数new FormData(form)构造formdata对象时需要传入form节点，如果不传入，则默认构建空表单。如果传入，则按照key=value的时候构建表单。
可以看看效果图
FormData 对象主要的方法有：
cavas压缩图片其实很简单，无非就是几个步骤：
1、选择图片，判断图片是否大于2M（用File对象的size进行判断，size的单位是字节）；
2、用FileReader对象读取文件成base64,
3、然后创建Image对象，赋值src属性，在Image对象加载完成的回调里创建cavas并绘制图片(根据图片是否大于2M动态调整画布大小)；
4、将cavas转成blob，拼在formdata中用ajax上传。
这篇文章到这里也就结束了，这篇文章包含了一些浏览器中提供的对象，可以看到都是很简单的内容。
❸ js 大文件分片上传处理如何实现
推荐采用webuploader控件来解决。
关于WebUploader的功能说明：
大文件上传续传
支持超大文件上传(100G+)和续传，可以关闭浏览器，重启系统后仍然继续上传。
开源
提供ASP.NET,JSP,PHP示例和源代码，其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。
分片、并发
分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
预览、压缩
支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。
解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。
多途径添加文件
支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。上传本地指定路径的文件，不需要通过点击按钮选择文件。
粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。
HTML5 & FLASH
兼容主流浏览器和低版本浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。而且支持IE6，IE8浏览器。
同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。
基于内存映射模式进行IO操作，充分发挥操作系统性能。
MD5秒传
当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。
如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。
易扩展、可拆分
采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。
采用AMD规范组织代码，清晰明了，方便高级玩家扩展。
❹ 如何压缩css和js文件实现快速传输
大家都知道bluehost支持Gzip压缩，但是并没有明显的一个开启按钮需要你自己配置，但是Gzip有一个缺点是不能压缩css和js文件，但是并不说明这两个文件不能像html文件那样压缩，我们可以利用一个叫Minify库进行压缩。
使用方法：1、下载Minify
2、解压缩后将min文件上传到网站根目录
3、编写.htaccess文件添加如下代码：
❺ 手机移动端html5、js如何实现视频上传并压缩视频质量，或者降低手机摄像头拍摄质量
你好 HTML5和javascript是不能压缩视频的，只能把视频传到服务器端，由后端来压缩视频，也不能控制相机的拍摄质量，除非你用JAVA写Android客户端才可以压缩。希望我的回答能够帮助到你，如果还有什么疑问可以继续追问。
❻ vue项目中先解压zip压缩包再上传
vue项目中先解压zip压缩包再上传，是的。element-upload上传图片压缩包→解压缩压缩包→获取压缩包的图片文件→将内存过大的图片进行压缩→将压缩之后的图片再次制作成压缩包→继续上传操作，先安装image-conversion，jszip模块，用于压缩和解压缩upload部分。
❼ 如何去选择部署原js和压缩js文件
用grunt，打包到dist目录，页面加载script的地方做个isdebug的开关。
开发时候处于debug状态用源码环境。发布时候修改debug状态让其处于压缩代码环境
❽ js文件过大，小程序无法发布
可以进行压缩后再上传。
首先将自己需要压缩的视频文件准备好，放置到同一个文件夹中，方便添加文件。将视频压缩软件安装到自己的电脑中，打开软件找到视频压缩，点击视频压缩进入到压缩的页面。
❾ js压缩图片 到固定像素以内，500k为例
本文旨在探究js压缩图片的两种方式： 改变图片长宽 ， 改变图片质量 ，和结合了以上两者的 最终方案 。
首先，阅读本文需要知道canvas的两个方法
这两个方法具体的说明可以在MDN上查看，关于图片压缩，也有很多现成的博客可以直接用。但是那些博客都有个问题，并没有关心之后图片的压缩质量。
我试着用一个现成的例子去跑了一下，一个1.7M的图片压缩到了23k，堪称像素级毁灭性破坏。
假如一张大图可能包含着很多文字等关键信息，必须上传之后使用方能清晰辨认。所以要压缩之后质量尽可能接近500k的。500k像素以内，就是若一张图宽度为1024，则高度不能超过500。因为图片有其他的信息，也是要占大小的。即不得大于 1024*500 。
所以，根据需求，上传图片不能超过500k的情况下尽可能保留图片的清晰度。当然如果可以的情况下用上面提到的 canvas.toDataURL 设置压缩程度为0.9，0.8试试看，图片质量可以接受，大小会有大幅度的缩小。
如果不压缩，靠调整图片长宽去控制上传大小呢？
原理很简单，就是靠不断地缩小限定的最大宽高，直到最终长宽的积小于规定的大小。
这种方法有可能最后得出的图片的大小会略大于规定大小，原因上文也提到过了，如果想使用这种方法，可自行再调整一下。
上面的方法有个问题，就是改变了图片的原始长宽。如果一个图的长宽足够大，压缩图片质量，糊一点但是内容看得清也是ok的嘛。所以，跟上面同理，我们可以不断调整图片的质量设定直到大小合适，那么，如何在图片上传之前知道图片的大小呢？
首先，需要知道的一点是，压缩之后拿到的base64字符串会转成blob对象，然后传给服务端。
可以查阅文档，blob对象有个属性是size
这个size就是上传之后实际的文件大小。
参照上面的思路，可以每次改变 canvas.toDataURL('image/' + fileType, level); level的值，去调整压缩图片质量，然后用blob对象的size去验证是否满足500k以内的需求。
关于 canvas.toDataURL 的level到底是怎么计算的，MDN文档里也没说，写了个循环一次减少0.1的level压缩了几个图片
用加减乘除算了一下，没找到规律，数学不好放弃了（这个东西好像也不是能观察出来的，看结果跟初始大小没啥关系）。
这里要注意的是，有可能遇到超大图片，0.1的level可能不足以压缩到500k，所以小于0.1的时候，改变level递减的差值继续压缩下去
在开始接收到图片的时候给一个loading增加用户的耐心好了，loading万岁~
其实单纯的压缩质量遇到稍大的图片，会导致页面高频计算，然后页面基本就用不了了- -。有尝试过用iphone的一个屏幕截图（10M左右），压的时候稍过一会，整个手机都在发烫，只能杀进程。
所以，若对长度没有特殊的限制，可以做一个缩放，去加快压缩的进度，提高能压缩的图片大小上限。
页面到了ios上还是不行- -，可以看到最后图片level为0.001，最长边为764。
问题还是循环次数还是过多，计算频率太高。从图中可看出，对于大图来说，初始设定的level和图片尺寸过于宽松，可以优化一下初始level和尺寸。
有的时候还会遇到一张图片无论如何也压不到500k，就是上一次和这次的压缩后大小没有变化，这种情况需要抛错，不让循环继续。
大图片的等待时间稍长，可以给用户先预览一个base64的图片增加等待耐心，方法名为 getImgBase64 ,这里都一并给出了
解决的隐患：上面这个方案会出现我需要一个500k的照片，压到了520k之后，再压了一次。有时候这最后的一次会特别夸张，直接将图片弄到了几十k。
参考了： https://github.com/WangYuLue/image-conversion
这个库里面有个方法 compressAccurately ,这个方法可以比较精准地压缩。偷偷翻了一下源码。
其实上一个方案的痛点就在于，如何在每一个压缩循环里处理尺寸和压缩比例。
总结
如有纰漏，欢迎指正
❿ 怎样在客户端 利用js 压缩图片 大小，然后上传至服务器比如2M压缩成几十KB
无法实现，js没有权限去修改本地文件的，只能是将大图上传到服务器后再压缩