前端图片压缩优化工具conversion

JavaScript020

前端图片压缩优化工具conversion,第1张

image-conversion 是一个简单易用的 JS 图片转换工具,提供了多种 Image、Canvas、File 和 dataURL 之间的转换方法。 另外,image-conversion 可以指定大小来压缩图片。 1、将图像压缩到 200kb: 2、以 0.9 的质量压缩图像 image-conversion 提供了多种方法来实现 Image、Canvas、File 和 dataURL 之间的转换,如下: 1、imagetoCanvas(image[, config]) {Promise(Canvas)} 将图像对象转换为画布对象。 2、dataURLtoFile(dataURL[, type]) {Promise(Blob)} 将 dataURL 字符串转换为 File(Blob) 对象,相当于把画布的内容转换成blob,type可以设置最终图片的格式。 type的值可以为:"image/png", "image/jpeg", "image/gif" 3、compress(file, config) {Promise(Blob)} 压缩文件(Blob)对象。 4、compressAccurately(file, config) {Promise(Blob)} 根据大小压缩文件(Blob)对象。 5、canvastoDataURL(canvas[, quality, type]) {Promise(string)} 将 Canvas 对象转换为 dataURL 字符串,该方法可以进行压缩。 6、canvastoFile(canvas[, quality, type]) {Promise(Blob)} 将 Canvas 对象转换为 Blob 对象,此方法可以进行压缩。 7、dataURLtoImage(dataURL) {Promise(Image)} 将 dataURL 字符串转换为图像对象。 8、downloadFile(file[, fileName]) 下载图片到本地。 9、filetoDataURL(file) {Promise(string)} 将 File(Blob) 对象转换为 dataURL 字符串。 10、urltoBlob(url) {Promise(Blob)} 通过图像 url 加载所需的 Blob 对象。 11、urltoImage(url) {Promise(Image)} 通过图片 url 加载所需的 Image 对象。 觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧

js的不可读化处理分为三个方面:压缩(compression)、混淆(obfuscation) 和加密(encryption)。

1. 压缩

这一操作的目的,是让最终代码传输量 (不代表代码量, 也不代表文件体积)尽可能小。压缩js的工具,常见的有:YUI Compressor、UglifyJS、Google Closure Compiler 等。

通常在代码压缩的过程中,只改变代码的语法,代码的语义和控制流不会有太大改变。

常见做法是把局部变量缩短化,把一些运算进行等价替换等。代码压缩对于代码保护有一些帮助,但由于语义和控制流基本没变,起不了太大作用。

在压缩层面上,代码不可读只是一种附带伤害,不是最终目的。

2. 混淆

这一操作的目的,是让代码尽可能地不可读,主要用作代码保护。

让代码不可读,增加分析的难度,这是唯一目的。混淆过后文件体积变大一倍也没关系,代码量变多也没关系,运算慢50% 也没关系。

常见的做法有:分离常量、打乱控制流、增加无义代码、检查运行环境如果不对就罢工,等等。

在混淆层面上,代码不可读是最终目的。

值得一提的是,Google Closure Compiler 的 Advance Level Compression 会压缩类和对象的成员,其压缩结果很难分析,也可以认为是一种混淆,但兼容性不太好。

3. 加密

有加密就有解密,意味着加密操作可逆,密文可以明文化。

在Web界,可以称之为加密的东西包括:HTTPS传输、JavaScript实现对称加密或者不对称加密等等。

ueditor 用啥工具不清楚,不过压缩js 文件有以下几种(我知道的)

在线压缩,可以访问某个网站,有提供的在线压缩js的功能,例如:chrunleexun.com

通过工具压缩,例如:uglify ,可以安装nodejs 后,安装uglify 模块,通过命令行对文件进行压缩。