首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS 图片压缩

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

25.7K21

Linux压缩打包介绍,gzip压缩工具,bzip2压缩工具,xz压缩工具

笔记内容: l 6.1 压缩打包介绍 l 6.2 gzip压缩工具 l 6.3 bzip2压缩工具 l 6.4 xz压缩工具 笔记日期:2017.8.5 6.1 压缩打包介绍 ?...注意:gzip不能压缩目录 6.3 bzip2压缩工具 ? 这个bzip工具比起gzip来说,要压缩得更狠一些,也就代表着耗费的cpu资源更多,而且这两个工具压缩算法不一样。...最小安装可能没有这个工具,需要使用yum install -y bzip2命令安装: ? bzip2和gzip的用法几乎是一模一样的: ? 解压同样的可以使用两个命令: ? ?...xz压缩工具和之前的两个压缩工具的用法也差不多,但是并不经常使用,但是在常用的tar包里面,会经常看到后缀为tar.xz的压缩包,所以此工具也是要了解一下的。   压缩示例: ?...从压缩的结果可以看出,这个xz工具对文件的压缩比前两个工具更狠,直接压缩到几十k了,相应的更耗费cpu资源。

1.9K20

使用uglifyjs压缩js

在做的web项目上线时,我们需要对js文件进行压缩,以减小文件的体积,加快加载速度,提高响应时间。下面我来介绍一个js压缩工具:uglifyjs。...最简单的使用方式: uglifyjs main.js -o main-min.js -c 下面是一些压缩时常用的参数 一些常用的参数列表 -o,--output 指定输出文件,默认情况下为命令行...懒人有懒法,花了点功夫,折腾了一个批处理文件,以后,想要压缩JS,只要双击运行这个.bat文件就可以了!...完整代码如下: @echo off :: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS SET JSFOLDER=C:\Users\Administrator\Desktop\formini...然后双击就可以批量使用uglifyjs压缩JS文件啦! 注意:uglifyjs不支持ES6

5.5K20

CSS 和 JS 合并压缩工具 Minify 及其 WordPress 插件

网站性能优化是一个永恒的话题,前面我已经介绍了 WordPress 后端性能优化的一系列方法,下面讲解下 Web 前端的性能优化,其中最重要是减少 HTTP 请求和压缩文件的大小,今天来介绍下使用 Minify...来合并和压缩 CSS 和 JavaScript 文件, Minify 介绍 Minify 是一个使用 PHP5 开发的应用,可以帮你合并以及压缩 CSS 和 JS 文件, 通过遵循一些 YSlow 的优化规则来提高网站的性能...它会合并多个CSS 或者 JavaScript 文件,移除一些不必要的空格和注释,进行 gzip 压缩,并且会设置浏览器的缓存头。...b=js&f=jquery-a.js,jquery-b.js,jquery-c.js。...和 CSS 分别一个),并且自定 Gzip 压缩

2.2K10

详解 JS 压缩图片

插播一下,本文案例已整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。...JavaScript 操作压缩图片原理不难,已有成熟 API,然而在实际输出压缩后结果却总有意外,有些图片竟会越压缩越大,加之终端(手机)类型众多,有些手机压缩图片甚至变黑。 ?...转 关 系 在实际应用中有可能使用的情境: 大多时候我们直接读取用户上传的 File 对象,读写到画布(canvas)上,利用 Canvas 的 API 进行压缩,完成压缩之后再转成 File(Blob...SimpleImageCompressor.prototype; win.SimpleImageCompressor = SimpleImageCompressor; /** * 初始...将改进版图片压缩整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。 整理匆忙,如有问题欢迎大家指正,完~

12.6K31

6.2 gzip压缩工具

.txt //范围1-9,默认为6 不能压缩目录 zcat 1.txt.gz gzip -c 1.txt > /root/1.txt.gz 压缩文件,并指定目录 gunzip -c /root.../1.txt.gz > /tmp/1.txt.new 解压文件,并指定 gzip压缩文件 gzip 1.txt 压缩1.txt文件 首先切换到/tmp目录下,并新建一个目录d6z [root...gzip压缩的级别范围有1-9,默认是 6 级别,也可以指定压缩级别 9级别是压缩的最严谨,所耗费的CPU资源也最大(压缩的文件也是最小的) 压缩到一定级别后,到达极限后,会压缩不了 file命令,...查看压缩后的文件 压缩后的文件变成了二进制文件,不能直接使用cat查看 file命令,查看压缩的文件 格式 file 1.txt.gz [root@localhost d6z]# file 1.txt.gz...,名称是1.txt,基于Unix平台,最后一次的更改时间,压缩的级别 zcat命令,查看压缩文件的内容 zcat命令,查看压缩文件的内容 格式 zcat 1.txt.gz 这是先解压,后cat查看的

1K71

zip压缩工具,tar打包,打包并压缩

笔记内容: l 6.5 zip压缩工具 l 6.6 tar打包 l 6.7 打包并压缩 笔记日期:2017.8.8 6.5 zip压缩工具 ? zip支持压缩目录,也可以压缩文件。...最小安装的CentOS7是没有这个工具的,需要使用yum install -y zip命令进行安装: ?...Zip压缩工具有一个特点就是压缩完文件后,原本的文件不会删除,其他的像gzip、bzip2之类的压缩工具,,压缩完文件后原本的文件会被删除。  ...使用unzip命令可以对zip压缩文件进行解压缩,最小安装的CentOS7是没有这个命令的,需要使用yum install -y unzip命令进行安装: ? 解压缩文件示例: ?...如果使用tar工具将这些散开的文件和目录打包到一起,就能同时进行传输,虽然可能达不到理论上的8秒传输完,但是肯定会比散开来传输要快得多,这就是需要用到打包工具的目的。

1.6K10

6.5 zip压缩工具

zip目录概要 zip支持压缩目录 zip 1.txt.zip 1.txt 压缩文件 zip -r 123.zip 123/ 压缩文件到指定目录下 unzip 1.txt.zip...在linux和windows中都有一个zip压缩工具,但是linux下不支持解压windos下的rar文件(默认不支持,需要安装工具才可以) 安装zip包——>yum install -y zip [...,解压的时候还是这个文件名 zip的压缩文件,是无法查看的 查看zip压缩包的文件列表 unzip -l yasuo.zip 查看压缩文件列表 [root@localhost d6z]# unzip...------- 2566970 9 files [root@localhost d6z]# 总结 gzip、bzip2、xz这三种压缩工具是可以指定解压文件的目录和名称...,而zip只可以指定目录,却不能指定解压文件名称 zip压缩工具可以压缩文件和目录,但gzip、bzip2、xz这三种却不可以压缩目录

1.1K50
领券