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 格式

  1. 安装插件

    npm install --save imagemin
    npm install --save imagemin-webp
    
  2. 压缩图片

    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: , 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(async (resolve, reject) => {
                const webps = await imagemin(images, {
                    destination: output,
                    plugins: [
                        imageminWebp({
                            quality: quality,
                        }),
                    ],
                });
                // console.log("--- webps: ", typeof(webps));
                // [{data: , 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: boolean
        isAutoUpload: boolean // 是否监听文件
        quality: number // 压缩质量
        isUpload: boolean // 用于是否上传
    }
    
    // 压缩图片
    let autoCfg = this.cfg.get(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-图片压缩_第1张图片

你可能感兴趣的:(Others)