前端图片上传服务器预处理压缩

今天介绍的主角是（ImageCompressor），是一款可以将图片进行无损压缩的插件，谁用谁香。

1.首先安装插件

// yarn 安装
yarn add image-compressor.js
// npm 安装
npm install image-compressor.js

2.开始使用

// 导入插件
import ImageCompressor from 'image-compressor.js';
// 直接使用就好
new ImageCompressor(data,  // 需要压缩的图片文件{quality: .6, // 压缩的比率 0.6刚好success: (res: any) => {//  res 转换之后的文件流// 压缩成功之后默认是blob文件，那么这里采用原生的文件转换，其实就是新创建一个文件let files = new window.File([res], res.name, { type: res.type })// 现在得到的就是标准的文件流，可以直接上传服务器  // 当然如果服务器默认接受blob文件，那就当上面描述的都是废话可自动删除、或注释掉},error(e) {console.log(e);}}
)

3.建议

组件用起来确实很香，但在用的时候还是建议点开看看源码，底层的逻辑。这样也可以封装自己的插件，最自身的学习很有益处。

ImageCompressor图片压缩相关推荐

uniapp 最接近微信的图片压缩插件 Ba-ImageCompressor
简介(下载地址) Ba-ImageCompressor 是一款uniapp简单快捷的图片压缩插件,仿微信朋友圈压缩策略. 支持批量压缩支持设置不压缩的阈值,单位为K 支持返回压缩后图片大小,单位为B ...
前端图片压缩解决办法
文章の目录问题产生背景解决办法 1.使用纯 js 解决 2.插件 js-image-compressor 写在最后问题产生背景在某一h5的项目,要求上传的图片格式为 base64 , 问题是用 ...
Android性能优化之图片压缩优化
1 分类 Android图片压缩结合多种压缩方式,常用的有尺寸压缩.质量压缩.采样率压缩以及通过JNI调用libjpeg库来进行压缩. 参考此方法:Android-BitherCompress 备注: ...
JS—图片压缩上传（单张）
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
使用libjpeg进行图片压缩（哈夫曼算法,无损压缩）
Huffman算法也是一种无损压缩算法,但与LZW压缩算法不同,Huffman需要得到每种字符出现概率的先验知识.通过计算字符序列中每种字符出现的频率,为每种字符进行唯一的编码设计,使得频率高的字符占 ...
Android图片压缩（质量压缩和尺寸压缩）
在网上调查了图片压缩的方法并实装后,大致上可以认为有两类压缩:质量压缩(不改变图片的尺寸)和尺寸压缩(相当于是像素上的压缩):质量压缩一般可用于上传大图前的处理,这样就可以节省一定的流量,毕竟现在的手 ...
android apk瘦身之图片压缩 tinypng
Android 的图片压缩其实压缩比很小.tinypng 大概可以压缩20%左右,我们工程的所有图片,之前是860k,压缩之后620k,少了200k. 使用: 1.安装python 2.使用pip进行 ...
(0031) iOS 开发之图片压缩
1. Aspect单词的, 都会按照图片的宽高比来拉伸.这样会显示不全照片 2. Scale单词的,都会对图片进行拉伸(缩放); 3. 没有出现Scale单词的,都不会对图片进行拉伸; UIViewC ...
【Android 内存优化】Android 原生 API 图片压缩原理 ( 哈夫曼编码开关 | 哈夫曼编码原理 | libjpeg-turbo 函数库 )
文章目录一. 哈夫曼编码开关二. 哈夫曼编码原理三. libjpeg-turbo 函数库四. libjpeg-turbo 函数库下载 [Android 内存优化]图片文件压缩 ( Androi ...

ImageCompressor图片压缩

前端图片上传服务器预处理压缩

今天介绍的主角是（ImageCompressor），是一款可以将图片进行无损压缩的插件，谁用谁香。

ImageCompressor图片压缩相关推荐

最新文章

热门文章