首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS 图片压缩

前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...base64 格式 base64 编码的图片通过 Canvas 转换压缩,这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api,一个调节图片的分辨率的,一个是调节图片压缩质量并且输出的...总结 本文仅针对图片压缩介绍了一些思路,简单的使用场景可能如下介绍,当然也会引申出来更多的使用场景,这些还有待大家一起挖掘。

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

使用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

详解 JS 压缩图片

插播一下,本文案例已整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。...JavaScript 操作压缩图片原理不难,已有成熟 API,然而在实际输出压缩后结果却总有意外,有些图片竟会越压缩越大,加之终端(手机)类型众多,有些手机压缩图片甚至变黑。 ?...如果你有足够的耐心多传几种类型图片就会发现还存在如下问题: 压缩输出图片寸尺固定为原始图片尺寸大小,而实际可能需要控制输出图片尺寸,同时达到尺寸也被压缩目的; png 格式图片同格式压缩压缩率不高,还有可能出现...,压缩率不高,还有可能出现“不减反增”现象 一般的,不建议将 png 格式图片压缩成自身格式,这样压缩率不理想,有时反而会造成自身质量变得更大。...将改进版图片压缩整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。 整理匆忙,如有问题欢迎大家指正,完~

12.6K31

Atom飞行手册翻译: 2.11 Atom中的版本控制

Atom中的版本控制 对于任何项目来说,版本控制都是很重要的一个方面。Atom集成了一些基本的Git和Github功能。...Git状态(status)列表 Atom带有模糊查找的包,提供了cmd-T快捷键来快速打开项目中的文件,以及cmd-B快捷键来跳到任何已打开的编辑器。...提交(commit)编辑器 Atom可以用作你的Git提交(commit)编辑器,并自带git语法包(language-git),它添加了语法高亮来编辑提交(commit)、合并(merge)和rebase...你可以使用以下命令来设置Atom为你的Git提交编辑器。...$ git config --global core.editor "atom --wait" language-git包会通过给提交消息的第一行加上颜色,来提醒你缩短它,当它超过50和65个字符的时候

74130

Atom飞行手册翻译: 2.12 在Atom中写作

Atom中写作 虽然Atom通常可能用来编写软件的代码,但是它还可以用来高效地编写文章。这通常采用一些标记语言,比如说Markdown和Asciidoc(也就是英文手册所用的格式)来完成。...下面我们会很快浏览一遍Atom提供给你用来写文章的一些工具。...拼写检查 如果你在处理文本(通常包括纯文本文件,Github Markdown文件和Github提交信息),Atom会自动尝试去检查你的拼写。...要向Atom尝试检查拼写的列表中添加文件类型,在你的设置视图中访问拼写检查包的设置,然后添加你希望检查的任何语法。...Atom拼写检查工具使用系统的字典,所以如果你希望在另一种语言或者区域中检查拼写,你可以很容易修改它。 拼写检查功能在atom/spell-check包中实现。

77720

Atom飞行手册翻译: 2.2 在Atom中移动

Atom中移动 用鼠标和方向键,简单地在Atom中移来移去非常容易,然而Atom有一些快捷键,可以让你把手一直放到键盘上,更快速地浏览文档。 首先,Atom自带许多Emacs的快捷键来浏览文档。...符号浏览功能在atom/symbols-view包中实现。 Atom书签 Atom同时拥有一个非常棒的途径,在特定的一行上面加上书签,使你可以快速跳到那一行。...如果你按下cmd-F2,Atom会给那一行加上书签。你可以在整个项目中设置一些书签,并且使用它们快速跳到项目中一些重要的行。一个小的书签标识会加在行号后面,像下面这张图的第22行。...按下F2之后,Atom会跳到当前文件的下一个书签的位置。如果你按下shift-F2则会跳到上一个。...书签功能在atom/bookmarks包中实现。

1K20

产品解析:Github Atom

昨天github通知我可以开始试用atom了。惊喜之余,立刻开始体验。 Atom是什么 Atom是github内部的编辑软件,据说已经使用了6年之久。...所以atom想做成一款初学者和Hacker都会喜欢,随着他们能力增长而增长的编辑器。 Atom基本功能 编辑器环境 ?...Atom插件系统 github在github.com/atom下开源了很多atom的package。我们随便看一个和排序相关的package —— 它能够排序选择的文本。使用起来是这个样子: ?...看上去atom的源代码来自chrome —— 我觉得atom很可能是一款以某种方式运行本地web app的浏览器。...Atom的问题 就目前两小时的使用而言,我遇到了如下问题: (1) 第一次打开atom的时候,一个help文档会被自动打开。正当我一行行看的时候,atom自己crash了。

1.5K80
领券