首页
学习
活动
专区
工具
TVP
发布

JS 图片压缩

前言 说起图片压缩,大家想到或者平时用到很多工具都可以实现,例如,客户端类有图片压缩工具 PPDuck3, JS 实现类有插件 compression.js ,亦或是在线处理类 OSS 上传,...文件上传后,在访问文件时中也有图片压缩配置选项,不过,能不能自己撸一套 JS 实现图片压缩代码呢?...压缩思路 涉及到 JS 图片压缩,我想法是需要用到 Canvas 绘图能力,通过调整图片分辨率或者绘图质量来达到图片压缩效果,实现思路如下: 获取上传 Input 中图片对象 File 将图片转换成...base64 格式 base64 编码图片通过 Canvas 转换压缩,这里会用到 Canvas drawImage 以及 toDataURL 这两个 Api,一个调节图片分辨率,一个是调节图片压缩质量并且输出...,后续会有详细介绍 转换后图片生成对应新图片,然后输出 优缺点介绍 不过 Canvas 压缩方式也有着自己优缺点: 优点:实现简单,参数可以配置化,自定义图片尺寸,指定区域裁剪等等。

25.2K21
您找到你想要的搜索结果了吗?
是的
没有找到

使用uglifyjs压缩js

在做web项目上线时,我们需要对js文件进行压缩,以减小文件体积,加快加载速度,提高响应时间。下面我来介绍一个js压缩工具:uglifyjs。...最简单使用方式: uglifyjs main.js -o main-min.js -c 下面是一些压缩时常用参数 一些常用参数列表 -o,--output 指定输出文件,默认情况下为命令行...可以在-c后边添加 一些具体参数来控制压缩特性,下文中会具体介绍。...--comments 用来控制注释代码 如果压缩时候想要保留版权信息,可以如下使用: uglifyjs main.js --comments -m -o main-min.js 当然,...完整代码如下: @echo off :: 设置压缩JS文件根目录,脚本会自动按树层次查找和压缩所有的JS SET JSFOLDER=C:\Users\Administrator\Desktop\formini

5.5K20

详解 JS 压缩图片

插播一下,本文案例已整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。...转 化 关 系 在实际应用中有可能使用情境: 大多时候我们直接读取用户上传 File 对象,读写到画布(canvas)上,利用 Canvas API 进行压缩,完成压缩之后再转成 File(Blob...,压缩率不高,还有可能出现“不减反增”现象 一般,不建议将 png 格式图片压缩成自身格式,这样压缩率不理想,有时反而会造成自身质量变得更大。...有个折衷方案,我们可以设置一个阈值,如果 png 图片质量小于这个值,就还是压缩输出 png 格式,这样最差输出结果不至于质量太大, 在此基础上,如果压缩后图片大小 “不减反增”,我们就兜底处理输出源图片给用户...将改进版图片压缩整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。 整理匆忙,如有问题欢迎大家指正,完~

12.4K31

python版js压缩工具

发现一个好用python版js压缩工具 Posted on 2012年09月18日 by 空华叔 · Leave a comment https://github.com/rspivak/...slimit 灰常好工具,压缩比高,代码兼容性好,可媲美主流压缩工具~ 做了下简单benchmark: #raw 256K jquery-1.8.1.js #download from jquery.com...-1.8.1.google.advanced.js 32K jquery-1.8.1.google.advanced.js.gz 92K jquery-1.8.1.google.simple.js....slimit.js.gz yui虽然最nb,拉开其他工具一大截,但是压出来已经不能用了,难道是我点击提交按钮方式不对??...实际使用时,我用环境是redhat5.x,python环境较为恶劣,slimit只兼容到python 2.7,于是单独做了一个”便携版本”,可以兼容到2.4,并且相关依赖也放到一起,下载即用:) https

6.1K20

性能优化之YUICompressor压缩JS、CSS

性能一直是项目中比较重要一点,尤其门户网站,对页面的响应要求是很高,从性能角度上来讲,对于Web端优化其中重要一点无疑是JS、CSS文件压缩,图片融合,尽量减小文件大小,必免占加载时占用过多带宽...yuicompressor无疑是一个比较好压缩工具,是yahoo一个开源组件,下面介绍yuicompressor压缩JS、CSS文件,及在项目中使用 yuicompressor介绍 1、首先需要从...压缩,指定压缩文件名为index-min.js。...文件 yuicompressor在项目中应用 上面的压缩只是单个文件,对于批量文件是不适合,因此需要写一个工具类,递归压缩指定文件夹中所js、css文件 在pom.xml文件中增加对...方法后,已经生成index-min.css,index-min.js文件,效果如下 Shell脚本压缩 如果是在CI环境上打包,不在本地,这时候就不能用上面提供Java工具了,这种情况下,如果

4K40

360自动收录js代码报错解决办法

偶然发现网站会出现两个黄色小叹号,也就是网站js报错,查看了一下,一个是因为360自动收录js引起了,另外一个是百度联盟广告引起报错警告,当然这并不影响什么,只是强迫症我感觉看上去很不爽(你也觉得不爽是吧...然后百度了一下,基本都说是引用js报错,但是百度基本都是地图引起,大概是酱婶: A Parser-blocking, cross site (i.e. different eTLD+1) script...问题并没有解决,所以还得继续找啊,终于在大象笔记博客上找到了解决办法,感谢大神!...以下引用“大象笔记”(传送门,点击可以直达该博客)原文,因为有些我也不明白,但是替换之后的确不报错了,至于有没有效果,我也不确定,至少我目前在用,用之前请自行斟酌吧: 由于 360 自动收录默认 js...,用时候复制压缩就行,把其中“YOUR_KEY”替换成自己KEN值就行了。

1.9K21

webpack学习(六)打包压缩js和css

打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS压缩混淆,无需引用额外插件, 其命令webpack...uglify-js发行版本只支持ES5,如果你要压缩ES6+代码请使用兼容开发分支。.../src/js/main.js' }, output: { filename: "[name]-[hash].js", path: __dirname +...exports', 'require'] //混淆,并排除关键字 }) ] }; 这里需要注意压缩时候需要排除一些关键字,不能混淆,比如$或者require,如果混淆的话就会影响到代码正常运行...列几个压缩时常有的属性: dead_code -- 移除没被引用代码 loops -- 当do、while 、 for循环判断条件可以确定是,对其进行优化。

4.6K60

Gulp实现css、js、图片压缩以及css、js文件MD5命名

目前做代码压缩合并工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具功能非常之强大:图片压缩、图片转base64、css和js压缩以及合并,文件md5重命名 ……。...js代码 npm install gulp-imagemin --save-dev //- 压缩图片 npm install gulp-base64 --save-dev //-...目前index.html文件中css和js引用路径是这样,如下图: ? 其他目录下html文件也是这样,都引用是未压缩和md5命名css和js文件。...gulp.src('dist/*',{read:false}) .pipe(clean()); }); /*压缩js文件,并生成md5后缀js文件*/ gulp.task(...js')) //- 另存压缩文件 .pipe(rev.manifest()) //- 生成一个rev-manifest.json

12K80
领券