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

JS 图片压缩

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

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

    详解 JS 压缩图片

    插播一下,本文案例已整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。...转 化 关 系 在实际应用中有可能使用情境: 大多时候我们直接读取用户上传 File 对象,读写到画布(canvas)上,利用 Canvas API 进行压缩,完成压缩之后再转成 File(Blob...如果不再需要相应数据,最好释放它占用内容。但只要有代码在引用对象 URL,内存就不会释放。要手工释放内存,可以把对象 URL 传给 window.revokeObjectURL()。...options.convertSize && options.mimeType === 'image/png') { options.mimeType = 'image/jpeg'; } // 省略一些代码...将改进版图片压缩整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。 整理匆忙,如有问题欢迎大家指正,完~

    12.7K31

    工程化(8): JS 体积优化之代码压缩混淆原理是什么?

    ---- 通过 AST 分析,根据一些策略,来生成一颗更小体积 AST 并生成代码。现代前端工程中,一般使用 terser 进行压缩混淆 JS。...多余空白字符会占用大量体积,如空格,换行符,另外注释也会占用文件体积。当我们把所有的空白符合注释都去掉之后,代码体积会得到减少。 「去掉多余字符之后,文件大小已经变为 30 Byte。」...压缩代码如下: function sum(a,b){return a+b} 替换掉多余字符后会有什么问题产生呢? 「有,比如多行代码压缩到一行时要注意行尾分号。」...,当完成代码压缩 (compress) 时,代码混淆 (mangle) 也捎带完成。...「但此时缩短变量命名也需要 AST 支持,不至于在作用域中造成命名冲突。」 解析程序逻辑:合并声明以及布尔值简化 通过分析代码逻辑,可对代码改写为更精简形式。

    2.1K10

    JavaScript代码压缩细节

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

    1.2K20

    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.2K20

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

    这确实是一个严重问题!!!T_T 对于这个问题,咋们今天就从代码压缩 + nginx 静态资源压缩,两个方面进行研究解决!!!...nginx 静态资源动态压缩原理,无非就帮我们将 js、css 等文件,压缩为一个.gz 文件,然后传输给前端浏览器,进行解析。...说到这,咋们不禁会说:那咋们先将 js、css 等文件,生成对应.gz 文件,不就不需要 nginx 动态压缩了嘛? 好像是这么一回事!!! 天才呀!!!...nginx 静态资源静态压缩js、css 等文件,生成对应.gz 文件 这个,就可以借助一些依赖进行处理了:compression-webpack-plugin 安装依赖: npm install...\css/, // 匹配文件名 threshold: 1024, // 对超过1k数据压缩 deleteOriginalAssets: false // 不删除源文件 })) 复制代码

    1.8K20

    JavaScript代码压缩功效与作用

    JavaScript代码压缩功效与作用JavaScript代码压缩可实现3大功能:减小体积、优化逻辑、提升执行效率专业JavaScript代码压缩,绝不仅仅是去除回车使代码挤到一行,而是用真正技术减小代码体积...下面,以JShamanJavaScript代码压缩功能为例,以说明JavaScript压缩具体能对代码进行哪些优化。...压缩后,直接取变量真正内容进行操作,省略了对变量使用,节省了逻辑开销。何时使用代码压缩?...在实际编程中,平常不需要压缩,优化压缩可能并不利于工作,比如:使用有意义长变量名有助于理解代码内容,方便维护,而不该使用无意义短变量名;条理分明、但可能不必要条件判断语言,同样便于代码理解,而不该为了短小而省略判断...而某些代码,可能需要考虑性能、大小,以方便高效执行、便于网络传输可以进行代码压缩。那么,你JavaScript代码,是需要混淆加密呢,还是需要压缩呢?

    23910

    iOS 图片压缩方法示例代码

    本篇文章主要介绍了iOS 图片压缩方法示例代码,主要有两种压缩图片方法,有兴趣可以了解一下,有兴趣可以了解一下。...两种压缩图片方法:压缩图片质量(Quality),压缩图片尺寸(Size)。...压缩图片尺寸 与之前类似,比较容易想到方法是,通过循环逐渐减小图片尺寸,直到图片稍小于指定大小(maxLength)。具体代码省略。同样问题是循环次数多,效率低,耗时长。...可以用二分法来提高效率,具体代码省略。这里介绍另外一种方法,比二分法更好,压缩次数少,而且可以使图片压缩后刚好小于指定大小(不只是 maxLength * 0.9)。...需要注意是绘制尺寸代码CGSize size = CGSizeMake((NSUInteger)(resultImage.size.width * sqrtf(ratio)), (NSUInteger

    1.7K30
    领券