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

JS 图片压缩

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

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

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

    Android Bitmap压缩方式分析

    Android Bitmap压缩方式分析 在网上调查了图片压缩的方法并实装后,大致上可以认为有两类压缩:质量压缩(不改变图片的尺寸)和尺寸压缩(相当于是像素上的压缩);质量压缩一般可用于上传大图前的处理...在Android开发中我们都会遇到在一个100*100的ImageView上显示一张过大的图片,如果直接把这张图片显示上去对我们应用没有一点好处反而存在OOM的危险,所以我们有必要采用一种有效压缩方式来显示上去...2.optioins.inPreferredConfig = Bitmap.Config.RGB_565设置在内存中以占用最少的方式,相比RGB_8888只有其一半的内存占有。...heigthRatio : widthRatio; 计算压缩比例,取最小值 这将保证压缩出来的图片大于或者等于请求的宽度或者高度。...getBitmapDatas(Bitmap bitmap) { Log.w(TAG, "Bitmap size = " + bitmap.getByteCount()); } 采用以上的压缩方式

    60820

    bitmap的六种压缩方式,图片压缩

    harryweasley/article/details/51955467 android中图片是以bitmap形式存在的,那么bitmap所占内存,直接影响到了应用所占内存大小,首先要知道bitmap所占内存大小计算方式...,下面开始说,bitmap的几种压缩方式。...,它是在保持像素的前提下改变图片的位深及透明度等,来达到压缩图片的目的,这也是为什么该方法叫质量压缩方法。...总结 以上就是5种图片压缩的方法,这里需要强调,他们的压缩仅仅只是对android中的bitmap来说的。如果将这些压缩后的bitmap另存为sd中,他们的内存大小并不一样。...看完了这篇内容,其实说白了,Bitmap压缩都是围绕这个来做文章:Bitmap所占用的内存 = 图片长度 x 图片宽度 x 一个像素点占用的字节数。3个参数,任意减少一个的值,就达到了压缩的效果。

    3.1K20

    详解 JS 压缩图片

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

    12.7K31

    详解Android Bitmap的常用压缩方式

    现在已经在公司实习了一个月多,目前主要是负责公司某个产品的内存优化,刚好就总结了一下Android Bitmap常用的优化方式。...Android中的图片是以Bitmap方式存在的,绘制的时候也是Bitmap,直接影响到app运行时的内存,在Android,Bitmap所占用的内存计算公式是:图片长度 x 图片宽度 x像素点的字节数...RGB_565 :表示16位RGB位图,即R=5,G=6,B=5,它没有透明度,一个像素点占5+6+5=16位,2个字节 我们在做压缩处理的时候,可以先通过改变Bitmap的图片格式,来达到压缩的效果,...我们可以看到有个参数:quality,可以调节你压缩的比例,但是还要注意一点就是,质量压缩堆png格式这种图片没有作用,因为png是无损压缩。...五、总结 以上5种就是我们常用的压缩方法了,这里的压缩也只是针对在运行加载的bitmap占用内存的大小。

    1.1K10

    图片转换js (img对象,file对象,base64,canvas对象),以及图片压缩方式(转载)

    大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器;有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库;有时候后它还有可能是一块canvas...画布,或者是一个Image对象,或者直接就是一个图片的url地址,我们需要将它们压缩上传到远程; 二、解决办法 如上图所示,七个方法,基本覆盖了JS中大部分文件类型的转换与压缩,其中: 1、 urltoImage...Blob 类型对象;其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型,表示图片压缩质量; fn 为回调方法,包含一个 Blob 对象的参数...files[0]; fileResizetoFile(file,0.6,function(res){ console.log(res); //拿到res,做出你要上传的操作; }) ps:下面看下JS...等比压缩图片的办法 function proDownImage(path,imgObj) { // 等比压缩图片工具 //var proMaxHeight = 185; var proMaxHeight

    4.6K41

    性能优化之YUICompressor压缩JS、CSS

    性能一直是项目中比较重要的一点,尤其门户网站,对页面的响应要求是很高的,从性能角度上来讲,对于Web端的优化其中重要的一点无疑是JS、CSS文件压缩,图片的融合,尽量减小文件的大小,必免占加载时占用过多的带宽...yuicompressor无疑是一个比较好的压缩工具,是yahoo的一个开源组件,下面介绍yuicompressor压缩JS、CSS文件,及在项目中的使用 yuicompressor介绍 1、首先需要从...压缩,指定压缩后的文件名为index-min.js。.../index.js -o /Users/longwentao/Downloads/index-min.js 压缩后在/Users/longwentao/Downloads/目录下多出一个index-min.js...文件 yuicompressor在项目中的应用 上面的压缩只是单个文件,对于批量文件是不适合的,因此需要写一个工具类,递归压缩指定文件夹中所的有js、css文件 在pom.xml文件中增加对

    4.2K40
    领券