feat: 增加luban压缩，删除none，upng，增加压缩效果对比

Author: juzisang

README.md

@@ -13,33 +13,24 @@
 
 - 安装 `picgo add compress`
 
-- 选择使用 compress `picgo use transformer`
+- 选择使用 `picgo use transformer`
 
 - 参数配置 `picgo config plugin compress`
 
   compress 选择压缩工具
+  默认选项
 
-  - [imagemin](https://github.com/imagemin/imagemin) 压缩过程不需要经过网络，速度快，但是图片会有损耗，默认选项
-  
+  - [imagemin](https://github.com/imagemin/imagemin) +luban 算法，最大程度节省流量，默认选项
+  - [imagemin](https://github.com/imagemin/imagemin) 压缩过程不需要经过网络，但是图片会有损耗
   - [tinypng](https://tinypng.com/) 无损压缩，需要上传到 tinypng
-  
-- [upng](https://github.com/photopea/UPNG.js) upng 无损压缩
-  
-- none 不压缩
-  
-  - luban [imagemin](https://github.com/imagemin/imagemin) +luban算法,最大程度节省流量,效果如下:
 
-    ![image-20200922212916280](https://cdn.jsdelivr.net/gh/hss01248/picbed@master/pic/1600781356315.jpeg)
-
-  ![image-20200922213104719](https://cdn.jsdelivr.net/gh/hss01248/picbed@master/pic/1600781464747.jpeg)
-  
   nameType 是否重命名
-  
+
   - timestamp 重命名成时间戳
   - none 不重名，默认选项
-  
+
   key 可选
-  
+
   - 在 [developers](https://tinypng.com/developers) 中申请
   - 逗号`,`隔开，可使用多个 Key 叠加使用次数
 
@@ -48,5 +39,10 @@
 - 打开详细窗口 > 插件设置 > 搜索 `compress` 即可安装，配置同上
 - 离线安装参考[这里](https://picgo.github.io/PicGo-Core-Doc/zh/dev-guide/deploy.html#gui%E6%8F%92%E4%BB%B6)
 
+## 压缩效果对比
 
-
+| 类型   | tinypng                  | luban                  | imagemin                  |
+| ------ | ------------------------ | ---------------------- | ------------------------- |
+| 原大小 | 1.5MB                    | 1.5M                   | 1.5M                      |
+| 压缩后 | 315 KB                   | 276 KB                 | 411 KB                    |
+| 效果图 | ![](./tests/tinypng.png) | ![](./tests/luban.png) | ![](./tests/imagemin.png) |

package.json

@@ -29,7 +29,6 @@
     "@types/fs-extra": "^8.1.0",
     "@types/imagemin": "^7.0.0",
     "@types/imagemin-mozjpeg": "^8.0.0",
-    "@types/imagemin-optipng": "^5.2.0",
     "@types/node": "^12.12.36",
     "@types/request": "^2.48.4",
     "@types/request-promise-native": "^1.0.17",
@@ -48,7 +47,6 @@
     "imagemin": "^7.0.1",
     "imagemin-jpegtran": "^7.0.0",
     "imagemin-mozjpeg": "^8.0.0",
-    "imagemin-optipng": "^7.1.0",
     "imagemin-upng": "^2.0.2",
     "images": "^3.2.3",
     "request": "^2.88.2"

src/compress/imagemin.ts

@@ -1,19 +1,20 @@
 import imagemin from 'imagemin'
 import mozjpeg from 'imagemin-mozjpeg'
-import optipng from 'imagemin-optipng'
+import upng from 'imagemin-upng'
 import { CompressOptions, ImgInfo } from '../utils/interfaces'
 import { getImageBuffer } from '../utils/getImage'
 
 export function imageminCompress({ ctx, info }: CompressOptions): Promise<ImgInfo> {
+  ctx.log.info('imagemin 压缩开始')
   return getImageBuffer(ctx, info.url)
     .then((buffer) => {
-      ctx.log.info('imagemin compress in progress')
+      ctx.log.info('imagemin 压缩完成')
       return imagemin.buffer(buffer, {
-        plugins: [mozjpeg({ quality: 75, progressive: true }), optipng({ optimizationLevel: 5 })],
+        plugins: [mozjpeg({ quality: 75, progressive: true }), upng()],
       })
     })
     .then((buffer) => {
-      ctx.log.info('imagemin compress in success')
+      ctx.log.info('imagemin 压缩失败')
       return {
         ...info,
         buffer,

src/compress/luban.ts

@@ -1,6 +1,5 @@
 import imagemin from 'imagemin'
 import mozjpeg from 'imagemin-mozjpeg'
-import optipng from 'imagemin-optipng'
 import { CompressOptions, ImgInfo } from '../utils/interfaces'
 import { getImageBuffer } from '../utils/getImage'
 var images = require("images");
@@ -13,14 +12,14 @@ export function lubanCompress({ ctx, info }: CompressOptions): Promise<ImgInfo>
   }*/
 
 
-function  computeInSampleSize(srcWidth :number, srcHeight:number) {
+  function computeInSampleSize(srcWidth: number, srcHeight: number) {
     srcWidth = srcWidth % 2 == 1 ? srcWidth + 1 : srcWidth;
     srcHeight = srcHeight % 2 == 1 ? srcHeight + 1 : srcHeight;
 
     var longSide = Math.max(srcWidth, srcHeight);
     var shortSide = Math.min(srcWidth, srcHeight);
 
-    var scale = ( shortSide / longSide);
+    var scale = (shortSide / longSide);
     if (scale <= 1 && scale > 0.5625) {
       if (longSide < 1664) {
         return 1;
@@ -34,7 +33,7 @@ function  computeInSampleSize(srcWidth :number, srcHeight:number) {
     } else if (scale <= 0.5625 && scale > 0.5) {
       return longSide / 1280 == 0 ? 1 : longSide / 1280;
     } else {
-      return  Math.ceil(longSide / (1280.0 / scale));
+      return Math.ceil(longSide / (1280.0 / scale));
     }
   }
 
@@ -45,14 +44,14 @@ function  computeInSampleSize(srcWidth :number, srcHeight:number) {
   }
 
   return getImageBuffer(ctx, info.url)
-    .then((buffer)=>{
-      ctx.log.warn('原始文件大小:'+Math.round(buffer.length/1024)+"k")
-      if(isJpg(buffer)){
-        ctx.log.warn('本身就是jpg,不用转换:'+info.url)
+    .then((buffer) => {
+      ctx.log.warn('原始文件大小:' + Math.round(buffer.length / 1024) + "k")
+      if (isJpg(buffer)) {
+        ctx.log.warn('本身就是jpg,不用转换:' + info.url)
         return buffer
       }
-      ctx.log.warn('luban  格式转换为jpg:'+info.url)
-      return  images(buffer).encode("jpg")//, {operation:90}
+      ctx.log.warn('luban  格式转换为jpg:' + info.url)
+      return images(buffer).encode("jpg")//, {operation:90}
     })
     /*.then((buffer)=>{
       var image2 = images(buffer)
@@ -79,31 +78,31 @@ function  computeInSampleSize(srcWidth :number, srcHeight:number) {
       return  image2.resize(conpressWidth).encode("jpg")//, {operation:90}
     })*/
     .then((buffer) => {
-      ctx.log.warn('文件大小:'+Math.round(buffer.length/1024)+"k")
+      ctx.log.warn('文件大小:' + Math.round(buffer.length / 1024) + "k")
 
       var image2 = images(buffer)
-      ctx.log.warn('图片尺寸:'+image2.width()+"x"+image2.height())
+      ctx.log.warn('图片尺寸:' + image2.width() + "x" + image2.height())
       //todo 关键在于获取图片本身的宽高
-      var sample = Math.round(computeInSampleSize(image2.width(),image2.height()))
-      var filesize = Math.round(buffer.length/1024)
-      var longsize = image2.width() > image2.height() ? image2.width() :image2.height()
+      var sample = Math.round(computeInSampleSize(image2.width(), image2.height()))
+      var filesize = Math.round(buffer.length / 1024)
+      var longsize = image2.width() > image2.height() ? image2.width() : image2.height()
       var sampleSize = ['1x1'];
-      if(filesize > 100 && sample >1){
-        if(longsize >3000 && filesize< 700){
+      if (filesize > 100 && sample > 1) {
+        if (longsize > 3000 && filesize < 700) {
 
-        }else {
-          sampleSize = [sample+'x'+sample]
+        } else {
+          sampleSize = [sample + 'x' + sample]
         }
 
       }
-      ctx.log.warn('sampleSize:'+sampleSize[0])
+      ctx.log.warn('sampleSize:' + sampleSize[0])
 
       return imagemin.buffer(buffer, {
-        plugins: [mozjpeg({ quality: 75,sample:sampleSize})],//, optipng({ optimizationLevel: 5 })//, sample:sampleSize
+        plugins: [mozjpeg({ quality: 75, sample: sampleSize })],//, optipng({ optimizationLevel: 5 })//, sample:sampleSize
       })
     })
     .then((buffer) => {
-      ctx.log.warn('最后mozjpeg  compress in success,最终文件大小:'+Math.round(buffer.length/1024)+"k")
+      ctx.log.warn('最后mozjpeg  compress in success,最终文件大小:' + Math.round(buffer.length / 1024) + "k")
       return {
         ...info,
         buffer,

src/compress/none.ts

@@ -5,6 +5,7 @@ export function tinypngKeyCompress({ ctx, info, key }: CompressOptions): Promise
   return Tinypng.init({ ctx, keys: key!.split(',') })
     .then(() => Tinypng.upload(info.url))
     .then((buffer) => {
+      ctx.log.info('TinypngWeb 上传成功')
       return {
         ...info,
         buffer,

src/compress/tinypng/index.ts

@@ -28,9 +28,11 @@ class TinyPng {
     this.PicGo = options.ctx
     this.options = options
     await this.readOrWriteConfig(this.options.keys)
+    this.PicGo.log.info('TinyPng初始化')
   }
 
   async upload(url: string) {
+    this.PicGo.log.info('TinyPng开始上传')
     if (isUrl(url)) {
       return this.uploadImage({ url, originalUrl: url, key: await this.getKey() })
     } else {
@@ -52,7 +54,7 @@ class TinyPng {
   }
 
   private uploadImage(options: { key: string; originalUrl: string; url?: string; buffer?: Buffer }): Promise<Buffer> {
-    this.PicGo.log.info('key:' + options.key)
+    this.PicGo.log.info('使用TinypngKey:' + options.key)
 
     const bearer = Base64.stringify(Utf8.parse(`api:${options.key}`))
 
@@ -68,7 +70,7 @@ class TinyPng {
     }
 
     if (options.url) {
-      this.PicGo.log.info('上传网络图片')
+      this.PicGo.log.info('TinyPng 上传网络图片')
       Object.assign(fetchOptions.headers, {
         'Content-Type': 'application/json',
       })
@@ -84,7 +86,7 @@ class TinyPng {
     const req = this.PicGo.Request.request(fetchOptions)
 
     if (options.buffer) {
-      this.PicGo.log.info('上传本地图片')
+      this.PicGo.log.info('TinyPng 上传本地图片')
       req.end(options.buffer)
     }
 

src/compress/tinypng/tinypng.ts

@@ -15,7 +15,7 @@ function getHeaders() {
 }
 
 export function tinypngCompress({ ctx, info }: CompressOptions): Promise<ImgInfo> {
-  ctx.log.info('TinyPng Web Upload')
+  ctx.log.info('TinypngWeb 开始上传')
   return getImageBuffer(ctx, info.url).then((buffer) => {
     const req = ctx.Request.request({
       url: TINYPNG_WEBUPLOAD_URL,
@@ -27,10 +27,10 @@ export function tinypngCompress({ ctx, info }: CompressOptions): Promise<ImgInfo
     return req
       .then((data: Response) => {
         if (data.headers.location) {
-          ctx.log.info('TinyPng Web Upload Success:' + data.headers.location)
+          ctx.log.info('TinypngWeb 上传成功:' + data.headers.location)
           return getImageBuffer(ctx, data.headers.location)
         }
-        throw new Error('TinyPng Web Upload Error')
+        throw new Error('TinypngWeb 上传失败')
       })
       .then((buffer) => {
         return {

src/compress/tinypngweb.ts

@@ -10,7 +10,5 @@ export enum NameType {
 export enum CompressType {
   tinypng = 'tinypng',
   imagemin = 'imagemin',
-  upng = 'upng',
   luban = 'luban',
-  none = 'none',
 }

src/config.ts

@@ -2,13 +2,11 @@ import PicGo from 'picgo'
 import { imageSize } from 'image-size'
 import * as path from 'path'
 import { PluginConfig } from 'picgo/dist/src/utils/interfaces'
-import { defaultCompress } from './compress/none'
 import { tinypngCompress } from './compress/tinypngweb'
 import { tinypngKeyCompress } from './compress/tinypng/index'
 import { imageminCompress } from './compress/imagemin'
 import { NameType, CompressType } from './config'
 import { reName } from './utils/reName'
-import { upngCompress } from './compress/upng'
 import { lubanCompress } from './compress/luban'
 
 //npm install /Users/hss/github/picgo-plugin-compress
@@ -28,7 +26,7 @@ function handle(ctx: PicGo) {
     })
     .map((info) => {
       const options = { ctx, info }
-      ctx.log.warn("compress type:"+compress)
+      ctx.log.warn("compress type:" + compress)
       return Promise.resolve()
         .then(() => {
           switch (compress) {
@@ -38,9 +36,6 @@ function handle(ctx: PicGo) {
               return imageminCompress(options)
             case CompressType.luban:
               return lubanCompress(options)
-            case CompressType.upng:
-              return upngCompress(options)
-            case CompressType.none:
             default:
               return lubanCompress(options)
           }