js压缩脚本

㈠ 如何实现JS中图片压缩方法

本文主要介绍JS中图片压缩的方法，包括等比压缩图片的方法,需要的朋友可以参考下，希望能帮助到大家。
大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器；有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库；有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；面对这么多的需求，索性画了一张图：
Alt text
二、解决办法
如上图所示，王二一共写了七个方法，基本覆盖了JS中大部分文件类型的转换与压缩，其中：
1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的参数，代码如下：


2、 imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个Image对象，代码如下：


3、 canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量; fn 为回调方法，包含一个 Blob 对象的参数;代码如下：


这里的 Blob 对象表示不可变的类似文件对象的原始数据。 Blob 表示不一定是 JavaScript 原生形式的数据。 File 接口基于 Blob ，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做File类型对待，其他更具体的用法可以参考MDN文档
4、 canvasResizetoDataURL(canvas,quality) 会将一个 Canvas 对象压缩转变为一个 dataURL 字符串,其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量;代码如下：


其中的 toDataURL API可以参考MDN文档
5、 filetoDataURL(file,fn) 会将 File （ Blob ）类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File （ Blob ）类型文件; fn 为回调方法，包含一个 dataURL 字符串的参数;代码如下：


6、 dataURLtoImage(dataurl,fn) 会将一串 dataURL 字符串转变为 Image 类型文件,其中 dataurl 参数传入一个 dataURL 字符串, fn 为回调方法，包含一个 Image 类型文件的参数，代码如下：


7、 dataURLtoFile(dataurl) 会将一串 dataURL 字符串转变为 Blob 类型对象，其中 dataurl 参数传入一个 dataURL 字符串,代码如下：


三、进一步封装
对于常用的将一个 File 对象压缩之后再变为 File 对象,我们可以将上面的方法再封装一下，参考如下代码：


其中， file 参数传入一个 File （ Blob ）类型文件； quality 参数传入一个 0-1 的 number 类型，表示图片压缩质量； fn 为回调方法，包含一个 Blob 类型文件的参数。
它使用起来就像下面这样：


这样的话，图片压缩上传就能轻松地搞定了，以上的8个方法我已经封装好放到 github 上了，喜欢的话可以使劲的star哈。
参考文档：
MDN
ps：下面看下JS等比压缩图片的办法

㈡ 如何对 js 源代码进行压缩

在JavaScript的世界里，代码体积的精简犹如为网页加速插上了翅膀。代码压缩，一项不可或缺的优化技术，通过精简字符、移除冗余，让文件瘦身，提升加载速度和执行效率，实现网页性能的飞跃。下面，让我们深入探讨如何对JavaScript源代码进行这场华丽的瘦身之旅。
1. 精简代码，从细节开始
首先，删除无用的空白字符和注释，如同剔除代码中的杂物，让代码变得简洁。空格、换行、制表符和注释虽然不影响代码运行，但它们无疑在无形中增加了文件的体积。
2. 简化命名，缩短路径
接着，对变量和函数进行瘦身。冗长的名称可以被缩短，甚至用单字符代替，这在减小代码量上立竿见影。每个字符的节省都意味着加载时间的缩减。
3. 检查并删除冗余
使用静态代码分析工具，找出并移除未使用的代码片段，就像清理无用的冗余，让代码更加精炼。
4. 代码混淆，隐藏秘密
进一步，代码混淆技术让变量和函数名变得难以理解，既减小了体积，又增加了破解的难度。这一步，是保护代码安全与效率的双重保障。
5. 简化表达，巧用缩写
对于常见的字符串和表达式，使用缩写和简写，就像给代码语言瘦身，提升其执行效率。
6. 内联与拆分，优化加载
内联函数和脚本，减少HTTP请求，而代码拆分则允许按需加载，兼顾性能与用户体验的双重考量。
7. 工具助力，一键压缩
最后，借助专业的压缩工具如UglifyJS和JShaman Minify，它们自动执行上述步骤，将你的代码压缩到极致，释放出极致的性能潜力。
例如，看看压缩前后的差异：未压缩的代码清晰易读，但体积较大。
未压缩代码：
// 这是一个示例函数 function exampleFunction(input) { var output = input * 2; return output; } // 调用示例函数 var result = exampleFunction(5); console.log(result);
而经过JShaman Minify压缩后，代码变得难以直接阅读，但体积大幅度减小：
function _e(input){var _o=input*2;return _o;}var _r=_e(5);console.log(_r);
总的来说，代码压缩是在开发和生产环境中不可或缺的一步。在保证代码可读性的同时，它为提升用户体验提供了有力支持。所以，下一次面对源代码时，别忘了为它穿上轻盈的压缩衣裳。

㈢ JS压缩谁最强对比5款JS代码压缩工具

在众多JS代码压缩工具中，谁的实力最为强大？本文对比了JShaman、minify-js、toptal、JSCompress以及一款未命名的工具，来揭示它们的压缩效果。

首先，测试用的JS代码原本大小为674字节。JShaman的表现最为亮眼，压缩后体积仅为207字节，压缩率高达惊人67%。相比之下，minify-js和JSCompress的压缩后体积都在390字节左右，效果稍逊于JShaman。而那位未知品牌的工具，压缩后仍有498字节，效果最不理想。

JShaman作为专业级工具的代表，不仅有无效代码清理和逻辑优化功能，还允许用户根据需求调整变量名长度等设置。然而，UglifyJS，这个国外知名的压缩工具，多用于开发环境或命令行操作，它在本文测试的jscompress中与babel-minify一起工作，因此没有单独列出。

补充测试显示，UglifyJS的压缩效果为394字节，同样显示出较强的实力。然而，那些无品牌工具仅能简单去除代码的换行和注释，对代码结构的优化有限。

综上所述，专业的JS压缩工具如JShaman能对代码进行深度优化和重构，显着减少代码体积。因此，建议在选择JS压缩工具时，优先考虑那些具备专业优化功能的工具，以获得最佳的压缩效果。