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

JS 图片压缩

前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...缺点:只有 jpeg 、webp 支持原图尺寸下图片质量的调整来达到压缩图片的效果,其他图片格式,仅能通过调节尺寸来实现 代码实现 <div class="container"...,不喜欢用 Vue 的也可以把代码稍微调整一下,下面开始具体分解一下代码的实现思路 Input 上传 File 处理 将 File 对象通过 FileReader 的 readAsDataURL 方法转换为

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

使用uglifyjs压缩js

在做的web项目上线时,我们需要对js文件进行压缩,以减小文件的体积,加快加载速度,提高响应时间。下面我来介绍一个js压缩工具:uglifyjs。...-b,--beautify 美化代码格式的参数 -m,--mangle 改变变量名称(ex:在一些例如YUI Compressor压缩完的代码后你可以看到)a,b,c,d,e,f之类的变量...--comments 用来控制注释的代码的 如果压缩的时候想要保留版权信息,可以如下使用: uglifyjs main.js --comments -m -o main-min.js 当然,...uglifyjs压缩批处理 我们不可能每次都打开cmd去键入压缩执行代码,容易写错不说(如上面那个结果图),还耗时,想想都会让人疯掉。...完整代码如下: @echo off :: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS SET JSFOLDER=C:\Users\Administrator\Desktop\formini

5.6K20

如何写好JS代码

正确性写代码首先应该先关注其正确性,如果正确性都保证不了,会造成业务逻辑失败,上线后会引起客户投诉。这一说法听起来有些滑稽,作为前端开发工程师怎么会提交错误的代码上线呢?...left-pad作为npm包,实现了左边字符补齐功能,当时主要有以下几个槽点:粒度拆分过细代码风格业余代码质量/效率不高我们来认真审视下这段代码,其实可以理解作者这样实现的用意。...对于代码风格,其实也还好,虽然没有注释,但代码语义化挺好,代码即注释。...如果判断的数字较小,我们可以利用刚转换成二进制数的特征和js的正则匹配来实现,具体代码如下:version4function isPowerOfFour(num){ num = parseInt(num...:00)*$/.test(num);}复制代码总结我们要真正写好JS代码,首先需要关注代码的正确性,保证程序在线上正常运行不出bug。

1.9K30

详解 JS 压缩图片

插播一下,本文案例已整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。...JavaScript 操作压缩图片原理不难,已有成熟 API,然而在实际输出压缩后结果却总有意外,有些图片竟会越压缩越大,加之终端(手机)类型众多,有些手机压缩图片甚至变黑。 ?...但只要有代码在引用对象 URL,内存就不会释放。要手工释放内存,可以把对象 URL 传给 window.revokeObjectURL()。...options.convertSize && options.mimeType === 'image/png') { options.mimeType = 'image/jpeg'; } // 省略一些代码...将改进版图片压缩整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。 整理匆忙,如有问题欢迎大家指正,完~

12.6K31

JavaScript代码压缩细节

前言 对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小。...为了方便理解和对比,本文会给出压缩前后代码作为参考,但压缩后的代码仍会换行,变量名字不做混淆处理,同时一个压缩规则的例子会尽量不混其它压缩策略进去。 1....的压缩 对a>=b取非可以得到a<b,对a&&b取非可以得到!a||!b。如果转换后的结果能得到更短的代码,那就将这个取非的表达式换成转换后的表达式。 压缩前 !(a>=b) !!!a 12 !...  function B(){ }   return false;   var a = 1; } 规则6.4 合并块末尾的return语句及其前边的多条表达式语句 其实这条规则看起来并不会使最后生成的代码缩小...C){   D(); } 规则7.3 尝试反转if/else分支,看看生成代码是否更短 尝试对if条件取非,如果能得到更短的代码,那就反转if/else分支。 压缩前 if (!

1.1K20

Babel是如何读懂JS代码

const generatedCode = generate(ast); // 将语法树重新组合成代码 抽象语法树是如何产生的 第2、3步相信不用花多少篇幅大家自己都能理解,重点介绍的第一步来了...那么回到代码的解析当中,JS代码有哪些语法单元呢?...大致有以下这些(其他语言也许类似但通常都有区别): 空白:JS中连续的空格、换行、缩进等这些如果不在字符串里,就没有任何实际逻辑意义,所以把连续的空白符直接组合在一起作为一个语法单元。...虽然对于人类来说有意义,但是对于计算机来说知道这是个“注释”就行了,并不关心内容,所以直接作为一个不可再拆的语法单元 字符串:对于机器而言,字符串的内容只是会参与计算或展示,里面再细分的内容也是没必要分析的 数字:JS...之后jQuery的诞生真正地让JS成为了web应用开发核心,web前端工程师这种职业也才真正独立出来。但后来随着语言预处理和打包等技术的出现,前端真的是越来越强大但是技术栈也真的是变得越来越复杂。

1.8K30

Nginx 静态压缩代码压缩,提高访问速度!

但我们上班的心情,还是不能被这炎热的夏天所影响的,所以今天咋们来讲讲如何给前端访问加加速吧!!! 基于目前大部分的应用,都使用了前后端分离的框架,vue 的前端应用,也是十分的流行。...T_T 对于这个问题,咋们今天就从代码压缩 + nginx 静态资源压缩,两个方面进行研究解决!!!...nginx 静态资源动态压缩的原理,无非就帮我们将 js、css 等文件,压缩为一个.gz 文件,然后传输给前端浏览器,进行解析。...说到这,咋们不禁会说:那咋们先将 js、css 等文件,生成对应的.gz 文件,不就不需要 nginx 动态压缩了嘛? 好像是这么一回事!!! 天才呀!!!...compression-webpack-plugin -D 复制代码 vue.config.js const CompressionWebpackPlugin = require('compression-webpack-plugin

1.5K20
领券