tinify压缩图片

aikeProject · Jan 15, 2020 · 2cab4ff · 2cab4ff
1 parent a8aa0b2
commit 2cab4ff
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -26,6 +26,7 @@
 
 - 可以通过调整图片质量压缩图片
 - 可以调整图片实际宽度和高度
+- 支持`tinify`上传压缩图片，[tinify](https://tinypng.com/developers/reference/nodejs)
 
 #### `Electron` 相关知识
 
@@ -55,25 +56,6 @@
     - `remote.app.getPath('desktop')`, 获取路径 
     - [详见](https://electronjs.org/docs/api/app#appgetpathname)
 
-#### 压缩图片使用的工具 `sharp` [sharp](https://github.com/lovell/sharp)
-
-- `sharp`在`electron`中使用，需要重新编译
-- 第一种方法：[electron-rebuild](https://electronjs.org/docs/tutorial/using-native-node-modules#%E4%B8%BA-electron-%E5%AE%89%E8%A3%85%E5%B9%B6%E9%87%8D%E6%96%B0%E7%BC%96%E8%AF%91%E6%A8%A1%E5%9D%97)
-
-  ```
-  package.json 配置
-  "scripts": {
-      "postinstall": "npx electron-rebuild"
-  }
-
-  在npm install之后，执行electron-rebuild进行重新编译即可，electron-rebuild只会重新编译，dependencies中的包
-  ```
-
-- 第二种方法：
-
-  - [node-gyp手动编译](https://electronjs.org/docs/tutorial/using-native-node-modules#%E4%B8%BA-electron-%E5%AE%89%E8%A3%85%E5%B9%B6%E9%87%8D%E6%96%B0%E7%BC%96%E8%AF%91%E6%A8%A1%E5%9D%97)参考
-  - [preinstall.sh](preinstall.sh) 手动编译脚本，在`npm install`之前就下载编译好sharp
-
 #### 开发环境搭建 [参考项目](https://github.com/electron-react-boilerplate/electron-react-boilerplate)
 
 - `npm run start-renderer-dev` 启动渲染进程
@@ -96,6 +78,33 @@
 - `npm run dist` 打包成安装包
 - `npm run release` 打包并发布
 
+#### 压缩图片使用的工具 `sharp` [sharp](https://github.com/lovell/sharp)
+
+- `sharp`在`electron`中使用，需要重新编译
+- 第一种方法：[electron-rebuild](https://electronjs.org/docs/tutorial/using-native-node-modules#%E4%B8%BA-electron-%E5%AE%89%E8%A3%85%E5%B9%B6%E9%87%8D%E6%96%B0%E7%BC%96%E8%AF%91%E6%A8%A1%E5%9D%97)
+
+  ```
+  package.json 配置
+  "scripts": {
+      "postinstall": "npx electron-rebuild"
+  }
+
+  在npm install之后，执行electron-rebuild进行重新编译即可，electron-rebuild只会重新编译，dependencies中的包
+  ```
+
+- 第二种方法：
+
+  - [node-gyp手动编译](https://electronjs.org/docs/tutorial/using-native-node-modules#%E4%B8%BA-electron-%E5%AE%89%E8%A3%85%E5%B9%B6%E9%87%8D%E6%96%B0%E7%BC%96%E8%AF%91%E6%A8%A1%E5%9D%97)参考
+  - [preinstall.sh](preinstall.sh) 手动编译脚本，在`npm install`之前就下载编译好sharp
+
+##### `tinify` 的使用
+
+- `tinify api` [详见](https://tinypng.com/developers/reference/nodejs)
+
+```
+npm install --save tinify
+```
+
 ##### 本地开发时的一些问题
 
 - `electron`换源安装
@@ -351,7 +360,7 @@
 
 - 拖放(Drag 与 drop)
   - [详见](https://www.cnblogs.com/sqh17/p/8676983.html)
-  - [文档](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API)<br/>
+  - [文档](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API)
   - [浏览器兼容性](https://www.caniuse.com/#feat=dragndrop)
 
   ```text
@@ -383,3 +392,7 @@
       tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
       icon: 一个图片的URL，将被用于显示通知的图标。
   ```
+
+#### Note
+
+- [sharp调整png quality缺少libimagequant问题](https://github.com/lovell/sharp/issues?utf8=%E2%9C%93&q=libimagequant)
diff --git a/src/renderer.js b/src/renderer.js
@@ -42,7 +42,7 @@ const settingsStore = new Store({
 });
 
 console.log('------ config ------');
-console.log(settingsStore.get());
+console.table(settingsStore.get());
 console.log('------ config ------');
 
 settingsStore.clear();
@@ -227,24 +227,26 @@ async function compressOne(file) {
         compressSize: null
     };
 
+    render(filesMap);
+
     try {
         let sharpData = await sharp(file.path);
         const type = file.type;
 
         if (!noCompress) {
-            
+
             switch (type) {
                 case ".png":
 
-                    // BUG: https://github.com/lovell/sharp/issues?utf8=%E2%9C%93&q=libimagequant
-                    // libvips: https://libvips.github.io/libvips/install.html
-                    // 后续修改吧，png调整图片质量需要安装支持的 libimagequant 的 libvips
-                    // 默认安装的sharp中的libvips，并不包括 libimagequant
-                    // 目前 png 就先采用jpg的方式压缩吧...
+                // BUG: https://github.com/lovell/sharp/issues?utf8=%E2%9C%93&q=libimagequant
+                // libvips: https://libvips.github.io/libvips/install.html
+                // 后续修改吧，png调整图片质量需要安装支持的 libimagequant 的 libvips
+                // 默认安装的sharp中的libvips，并不包括 libimagequant
+                // 目前 png 就先采用jpg的方式压缩吧...
 
-                    // sharpData = await sharpData
-                    //     .png({palette: true, ...defaultOpt});
-                    // break;
+                // sharpData = await sharpData
+                //     .png({palette: true, ...defaultOpt});
+                // break;
                 case ".jpg":
                     ;
                 case ".jpeg":
@@ -305,23 +307,14 @@ async function compressOne(file) {
         render(filesMap);
 
         return Promise.reject(err);
-    };
+    }
 }
 
 // 重试
 window.timeout = null;
 
 function compressRetry(id) {
     const file = filesMap[id];
-    filesMap[id] = {
-        ...file,
-        compress: true,
-        done: false,
-        error: false,
-        compressSize: null
-    };
-
-    render(filesMap);
 
     clearTimeout(window.timeout);
 
@@ -331,7 +324,20 @@ function compressRetry(id) {
 
 }
 
-window.compressRetry = compressRetry;
+
+/**
+ * tinif压缩错误重试
+ * @param id
+ */
+function compressTinifyRetry(id) {
+    const file = filesMap[id];
+
+    clearTimeout(window.timeout);
+
+    window.timeout = setTimeout(() => {
+        compressOneTinify(file);
+    }, 500);
+}
 
 /**
  * 普通的压缩方式: 使用sharp的方式
@@ -377,8 +383,29 @@ async function compressOneTinify(file) {
             compressSize: null
         };
 
+        render(filesMap);
+
         const readFileBuffer = await fs.promises.readFile(file.path);
-        const tinifyData = await tinify.fromBuffer(readFileBuffer);
+        let tinifyData = await tinify.fromBuffer(readFileBuffer);
+
+        if (resizeWidth && resizeHeight) {
+            tinifyData = await tinifyData.resize({
+                method: "fit",
+                width: resizeWidth,
+                height: resizeHeight
+            });
+        } else if (resizeWidth) {
+            tinifyData = await tinifyData.resize({
+                method: "scale",
+                width: resizeWidth
+            });
+        } else if (resizeHeight) {
+            tinifyData = await tinifyData.resize({
+                method: "scale",
+                height: resizeHeight
+            });
+        }
+
         const writeTinifyBuffer = await tinifyData.toBuffer();
         await fs.promises.writeFile(path.join(outPath, file.name), writeTinifyBuffer);
 
@@ -474,6 +501,7 @@ async function compressTinify(firstLast) {
 
         // allSettled 只有等到所有这些参数实例都返回结果
         // 不管是fulfilled还是rejected，包装实例才会结束
+        // http://es6.ruanyifeng.com/#docs/promise
         Promise.allSettled(runFnGroup).then(() => {
             compressDone();
         });
@@ -514,8 +542,10 @@ function compress() {
     const firstLast = firstLastArr(files, chunkCount);
 
     if (isTinify) {
+        window.compressRetry = compressRetry;
         compressTinify(firstLast);
     } else {
+        window.compressRetry = compressTinifyRetry;
         compressCommon(firstLast);
     }
 }
@@ -552,9 +582,11 @@ document.querySelector('#setting').addEventListener('click', () => {
 });
 
 document.querySelector('#compress').addEventListener('click', () => {
-    console.log(settingsStore.get());
+    console.log('------ config ------');
+    console.table(settingsStore.get());
+    console.log('------ config ------');
 
     setSettings();
 
     compress();
-});
+});