vscode-图片压缩

title: vscode-图片压缩
categories: VSCode
tags: [vscode, webp, 压缩]
date: 2020-04-01 19:35:33
comments: false
mathjax: true
toc: true

vscode-图片压缩, 上传 md 笔记中使用到的图片到图床前, 进行一次 ‘瘦身’

前篇

官方
- https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization?hl=zh-cn#webp-browser-support
https://github.com/imagemin/imagemin
从图片优化说起 - https://cjting.me/2019/07/29/image-optimization/
图像优化如何使我的网站页面重量减少62％ - https://segmentfault.com/a/1190000018392559

因为我是用 vscode 写了个插件监听某个文件夹, 监听到到有图片新增, 就自动上传到 七牛云 图传, 所以就把这个 图片瘦身 功能集成 vscode 中.

压缩为 webp 格式

安装插件

npm install --save imagemin
npm install --save imagemin-webp

压缩图片

const images = ['F:/a_desktop/20200330_143904.png', 'F:/a_desktop/20200330_143902.png'] // 一定要是 /, 因为这里使用的是 glob 匹配模式, 如: 'images/*.{jpg,png}'
const output = 'F:/a_desktop/output'
const quality = 80
const webps = await imagemin(images, {destination: output,plugins: [imageminWebp({quality: quality,}),],
});
// console.log("--- webps: ", typeof(webps));
// [{data: <Buffer 89 50 4e …>, destinationPath: 'build/images/foo.jpg'}, …]
const resArr = Object.keys(webps).map(key => webps[key].destinationPath);

vscode 中的完整源码

PicTool.ts

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');class PicTool {// images 是一个 glob 数组, 如: ['images/*.{jpg}']public static imageminToWebp(images: string[], output: string, quality: number) {return new Promise<string[]>(async (resolve, reject) => {const webps = await imagemin(images, {destination: output,plugins: [imageminWebp({quality: quality,}),],});// console.log("--- webps: ", typeof(webps));// [{data: <Buffer 89 50 4e …>, destinationPath: 'build/images/foo.jpg'}, …]const resArr = Object.keys(webps).map(key => webps[key].destinationPath);resolve(resArr)});}
}export default PicTool;

使用

import PicTool from './PicTool';// 是否自动上传, vscode 配置参数
export interface IQiniuAuto {isCompress: booleanisAutoUpload: boolean // 是否监听文件quality: number // 压缩质量isUpload: boolean // 用于是否上传
}// 压缩图片
let autoCfg = this.cfg.get<IQiniuAuto>(E_CONFIG.autoUploadQiniu);
if (autoCfg.isCompress) {const tempDir = path.join(vscode.workspace.rootPath, 'compressTempSave');const picArr = await PicTool.imageminToWebp(filePathArr, tempDir, autoCfg.quality) // 关键代码for (const srcFile of filePathArr) { // 删除 原图Utils.delFileSync(srcFile);}filePathArr = picArr // 生成压缩图路径数组
}

vscode-图片压缩相关推荐

LRZ图片压缩模块的TypeScript定义文件
lrz是一个图片压缩模块,用作H5来减少上传流量,自动压缩图片还是挺不错的. 之前用的好好的,但是最近代码由VUE2升级到VUE3,需要支持typescript,结果lrz报错了.有两个办法解决,1是 ...
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 ...
【Android 内存优化】Android 原生 API 图片压缩原理 ( Bitmap_compress 方法解析 | Skia 二维图形库 | libjpeg 函数库 | libpng 函数库 )
文章目录一. 图片质量压缩方法二. Skia 二维图形库三. libjpeg.libpng 函数库引入在博客 [Android 内存优化]图片文件压缩 ( Android 原生 API 提供的 ...
【Android 内存优化】Android 原生 API 图片压缩原理 ( 图片质量压缩方法 | 查找 Java 源码中的 native 方法对应的 C++ 源码 )
文章目录一. 图片质量压缩方法二. 查找对应的 Native 方法源码三. 分析 Bitmap.cpp 中动态注册 Native 方法在博客 [Android 内存优化]图片文件压缩 ( An ...

vscode-图片压缩

title: vscode-图片压缩
categories: VSCode
tags: [vscode, webp, 压缩]
date: 2020-04-01 19:35:33
comments: false
mathjax: true
toc: true

前篇

压缩为 webp 格式

vscode 中的完整源码

vscode-图片压缩相关推荐

最新文章

热门文章

vscode-图片压缩

title: vscode-图片压缩 categories: VSCode tags: [vscode, webp, 压缩] date: 2020-04-01 19:35:33 comments: false mathjax: true toc: true

前篇

压缩为 webp 格式

vscode 中的完整源码

vscode-图片压缩相关推荐

最新文章

热门文章

title: vscode-图片压缩
categories: VSCode
tags: [vscode, webp, 压缩]
date: 2020-04-01 19:35:33
comments: false
mathjax: true
toc: true