juzisang/picgo-plugin-compress

tinypng报错

Opened this issue · 12 comments

Marcus-zh commented

晚上才装上,报错如下(有没有key都是这样)

2023-01-13 21:11:38 [PicGo INFO] Before transform 
2023-01-13 21:11:38 [PicGo INFO] Transforming... Current transformer is [compress] 
2023-01-13 21:11:38 [PicGo INFO] 压缩:tinypng 
2023-01-13 21:11:38 [PicGo INFO] 图片地址:https://img01.anzhiy.cn/useruploads/8/2022/12/15/639adf5b8806a.png 
2023-01-13 21:11:38 [PicGo INFO] 图片信息:{"fileName":"639adf5b8806a.png","extname":".png"} 
2023-01-13 21:11:38 [PicGo INFO] 获取网络图片 
2023-01-13 21:11:38 [PicGo WARN] failed 
2023-01-13 21:11:38 [PicGo ERROR] 
------Error Stack Begin------
TypeError: ctx.Request.request(...).on is not a function
    at C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:70:111
    at step (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:52:23)
    at Object.next (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:33:53)
    at C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:27:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:23:12)
    at fetchImage (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:67:12)
    at Object.getImageBuffer (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:85:16)
    at Object.TinypngCompress (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\compress\tinypngweb.js:18:20)
    at C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\index.js:23:115
-------Error Stack End------- 
2023-01-13 21:11:38 [PicGo ERROR] 
------Error Stack Begin------
TypeError: ctx.Request.request(...).on is not a function
    at C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:70:111
    at step (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:52:23)
    at Object.next (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:33:53)
    at C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:27:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:23:12)
    at fetchImage (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:67:12)
    at Object.getImageBuffer (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\utils.js:85:16)
    at Object.TinypngCompress (C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\compress\tinypngweb.js:18:20)
    at C:\Users\Administrator\AppData\Roaming\picgo\node_modules\picgo-plugin-compress\dist\index.js:23:115
-------Error Stack End-------

或许我是漏掉了什么,求解🤩

LinusLing commented

不是 compress 插件的问题。

可以看 Obsidian 高效写作：PicGo+gitee+TnyPNG自动压缩图片上传图床，而且还免费！ 这个b站视频，里面有讲详细的解决方案。

hyn-lei commented

更新：PicGo底层上传库从 request 迁移至 axios ，理论上对旧有插件是兼容的，如果插件遇到不兼容的情况请开发者参考 PicGo-Core 的 PicGo/PicGo-Core#65 进行适配

可以根据楼上的视频，下载老版本的 picgo2.3.0 即可。插件停更好像。

hyn-lei commented

源码修改：fork github 上 picgo-plugin-compress 代码，clone 到本地后，修改两处即可。

  • src\util.ts，13行修改为：

       const response = await ctx.request({ method: 'GET', url, encoding: null, resolveWithFullResponse: true, responseType: 'arraybuffer' })

  • src\compress\tinypng\tinypng.ts，86-93 行修改为：

        if (options.buffer) {
       this.PicGo.log.info('TinyPng 上传本地图片')
       Object.assign(fetchOptions, {
         data: options.buffer
       })
     }
     const req = this.PicGo.request(fetchOptions)

  • package.json ，修改，更新 picgo-core 的版本，"picgo": "1.5.0"

  • 执行 rpm run build，重新编译生成dist 文件夹中内容，关闭 PicGo，将生成的 dist 文件复制到 PicGo用户数据目录中的 node_modules\picgo-plugin-compress 覆盖即可。

boringhex-top commented

源码修改：fork github 上 picgo-plugin-compress 代码，clone 到本地后，修改两处即可。

  • src\util.ts，13行修改为： 
       const response = await ctx.request({ method: 'GET', url, encoding: null, resolveWithFullResponse: true, responseType: 'arraybuffer' })
  • src\compress\tinypng\tinypng.ts，86-93 行修改为： 
        if (options.buffer) {
       this.PicGo.log.info('TinyPng 上传本地图片')
       Object.assign(fetchOptions, {
         data: options.buffer
       })
     }
     const req = this.PicGo.request(fetchOptions)
  • 执行 rpm run build，重新编译生成dist 文件夹中内容，关闭 PicGo，将生成的 dist 文件复制到 PicGo用户数据目录中的 node_modules\picgo-plugin-compress 覆盖即可。

按照这个方法执行后报如下错误：

❯ npm run build

> picgo-plugin-compress@1.4.0 build
> tsc -p .

src/compress/tinypng/tinypng.ts:92:28 - error TS2551: Property 'request' does not exist on type 'PicGo'. Did you mean 'Request'?

92     const req = this.PicGo.request(fetchOptions)
                              ~~~~~~~

  node_modules/_picgo@1.4.8@picgo/dist/src/core/PicGo.d.ts:22:5
    22     Request: Request;
           ~~~~~~~
    'Request' is declared here.

src/utils.ts:12:60 - error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.

12 export async function fetchImage(ctx: PicGo, url: string): Promise<Buffer> {
                                                              ~~~~~~~~~~~~~~~

src/utils.ts:13:30 - error TS2349: This expression is not callable.
  Type 'Request' has no call signatures.

13   const response = await ctx.Request({ method: 'GET', url, encoding: null, resolveWithFullResponse: true, responseType: 'arraybuffer' })
                                ~~~~~~~


Found 3 errors in 2 files.

Errors  Files
     1  src/compress/tinypng/tinypng.ts:92
     2  src/utils.ts:12

src\util.ts 文件修改后12-18行是这样吗：

export async function fetchImage(ctx: PicGo, url: string): Promise<Buffer> {
  const response = await ctx.Request({ method: 'GET', url, encoding: null, resolveWithFullResponse: true, responseType: 'arraybuffer' })
  const contentType = response.headers['content-type']
  if (contentType && !contentType.includes('image')) {
    throw new Error(`${url} 不是图片`)
  }
}
hyn-lei commented

@boringhex-top 不好意思，忘记贴了，还有一个package.json 需要修改，更新 picgo-core的版本到1.5.0

"picgo": "1.5.0",

boringhex-top commented

@Atomin-Lee 感谢，我修改picgo→1.5.0后，报如下错误：

❯ npm run build

> picgo-plugin-compress@1.4.0 build
> tsc -p .

src/compress/image2webp.ts:7:41 - error TS2709: Cannot use namespace 'PicGo' as a type.

7 export function Image2WebPCompress(ctx: PicGo, { imageUrl }: CommonParams): Promise<ImageInfo> {
                                          ~~~~~

src/compress/imagemin.ts:8:39 - error TS2709: Cannot use namespace 'PicGo' as a type.

8 export function ImageminCompress(ctx: PicGo, { imageUrl }: CommonParams): Promise<ImageInfo> {
                                        ~~~~~

src/compress/skip.ts:5:35 - error TS2709: Cannot use namespace 'PicGo' as a type.

5 export function SkipCompress(ctx: PicGo, { imageUrl }: CommonParams): Promise<ImageInfo> {
                                    ~~~~~

src/compress/tinypng/index.ts:10:41 - error TS2709: Cannot use namespace 'PicGo' as a type.

10 export function TinypngKeyCompress(ctx: PicGo, { imageUrl, key }: CommonParams & ITinypngOptions): Promise<ImageInfo> {
                                           ~~~~~

src/compress/tinypng/tinypng.ts:12:8 - error TS2709: Cannot use namespace 'PicGo' as a type.

12   ctx: PicGo
          ~~~~~

src/compress/tinypng/tinypng.ts:25:19 - error TS2709: Cannot use namespace 'PicGo' as a type.

25   private PicGo!: PicGo
                     ~~~~~

src/compress/tinypngweb.ts:18:38 - error TS2709: Cannot use namespace 'PicGo' as a type.

18 export function TinypngCompress(ctx: PicGo, { imageUrl }: CommonParams): Promise<ImageInfo> {
                                        ~~~~~

src/compress/tinypngweb.ts:32:14 - error TS7006: Parameter 'buffer' implicitly has an 'any' type.

32       .then((buffer) => {
                ~~~~~~

src/index.ts:2:30 - error TS2307: Cannot find module 'picgo/dist/src/utils/interfaces' or its corresponding type declarations.

2 import { PluginConfig } from 'picgo/dist/src/utils/interfaces'
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/index.ts:14:22 - error TS2709: Cannot use namespace 'PicGo' as a type.

14 function handle(ctx: PicGo) {
                        ~~~~~

src/index.ts:21:32 - error TS7006: Parameter 'imageUrl' implicitly has an 'any' type.

21   const tasks = ctx.input.map((imageUrl) => {
                                  ~~~~~~~~

src/index.ts:43:44 - error TS7006: Parameter 'item' implicitly has an 'any' type.

43       '图片信息:' + JSON.stringify(output.map((item) => ({ fileName: item.fileName, extname: item.extname, height: item.height, width: item.width })))
                                              ~~~~

src/index.ts:50:33 - error TS2709: Cannot use namespace 'PicGo' as a type.

50 module.exports = function (ctx: PicGo): any {
                                   ~~~~~

src/index.ts:56:17 - error TS2709: Cannot use namespace 'PicGo' as a type.

56     config(ctx: PicGo): PluginConfig[] {
                   ~~~~~

src/utils.ts:12:39 - error TS2709: Cannot use namespace 'PicGo' as a type.

12 export async function fetchImage(ctx: PicGo, url: string): Promise<Buffer> {
                                         ~~~~~

src/utils.ts:12:60 - error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.

12 export async function fetchImage(ctx: PicGo, url: string): Promise<Buffer> {
                                                              ~~~~~~~~~~~~~~~

src/utils.ts:20:37 - error TS2709: Cannot use namespace 'PicGo' as a type.

20 export function getImageBuffer(ctx: PicGo, imageUrl: string): Promise<Buffer> {
                                       ~~~~~


Found 17 errors in 8 files.

Errors  Files
     1  src/compress/image2webp.ts:7
     1  src/compress/imagemin.ts:8
     1  src/compress/skip.ts:5
     1  src/compress/tinypng/index.ts:10
     2  src/compress/tinypng/tinypng.ts:12
     2  src/compress/tinypngweb.ts:18
     6  src/index.ts:2
     3  src/utils.ts:12
boringhex-top commented

修改这几个文件导入picgo的语句：
import { PicGo } from 'picgo'

修改index.ts文件：

第2行

import { IPluginConfig } from 'picgo/dist/utils/interfaces'

56-60行

    config(ctx: PicGo): IPluginConfig[] {
      let config: IConfig = ctx.getConfig('transformer.compress') || ctx.getConfig('picgo-plugin-compress')
      // if (!config) {
      //   config = {}
      // }

还是有几个错误：

❯ npm run build

> picgo-plugin-compress@1.4.0 build
> tsc -p .

src/compress/tinypng/tinypng.ts:94:21 - error TS2345: Argument of type '(response: Response) => Promise<Buffer>' is not assignable to parameter of type '(value: unknown) => Buffer | PromiseLike<Buffer>'.
  Types of parameters 'response' and 'value' are incompatible.
    Type 'unknown' is not assignable to type 'Response'.

94     return req.then((response: Response) => {
                       ~~~~~~~~~~~~~~~~~~~~~~~~~

src/compress/tinypngweb.ts:22:9 - error TS2339: Property 'end' does not exist on type 'Promise<IFullResponse<unknown, { url: string; method: "POST"; headers: { origin: string; referer: string; 'content-type': string; 'user-agent': string; }; resolveWithFullResponse: true; }>>'.

22     req.end(buffer)
           ~~~

src/compress/tinypngweb.ts:24:13 - error TS2345: Argument of type '(data: Response) => Promise<Buffer>' is not assignable to parameter of type '(value: IFullResponse<unknown, { url: string; method: "POST"; headers: { origin: string; referer: string; 'content-type': string; 'user-agent': string; }; resolveWithFullResponse: true; }>) => Buffer | PromiseLike<...>'.
  Types of parameters 'data' and 'value' are incompatible.
    Type 'AxiosResponse<unknown, { url: string; method: "POST"; headers: { origin: string; referer: string; 'content-type': string; 'user-agent': string; }; resolveWithFullResponse: true; }> & { ...; }' is missing the following properties from type 'Response': statusMessage, caseless, toJSON, aborted, and 47 more.

24       .then((data: Response) => {
               ~~~~~~~~~~~~~~~~~~~~~

src/index.ts:54:53 - error TS2322: Type '(ctx: PicGo) => Promise<PicGo>' is not assignable to type '((ctx: IPicGo) => Promise<any>) | ((ctx: IPicGo) => void)'.
  Type '(ctx: PicGo) => Promise<PicGo>' is not assignable to type '(ctx: IPicGo) => Promise<any>'.
    Types of parameters 'ctx' and 'ctx' are incompatible.
      Type 'IPicGo' is missing the following properties from type 'PicGo': _config, lifecycle, db, _pluginLoader, and 5 more.

54       ctx.helper.transformer.register('compress', { handle })
                                                       ~~~~~~

  node_modules/_picgo@1.5.0@picgo/dist/types/index.d.ts:369:5
    369     handle: ((ctx: IPicGo) => Promise<any>) | ((ctx: IPicGo) => void);
            ~~~~~~
    The expected type comes from property 'handle' which is declared here on type 'IPlugin'

src/utils.ts:12:60 - error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.

12 export async function fetchImage(ctx: PicGo, url: string): Promise<Buffer> {
                                                              ~~~~~~~~~~~~~~~


Found 5 errors in 4 files.

Errors  Files
     1  src/compress/tinypng/tinypng.ts:94
     2  src/compress/tinypngweb.ts:22
     1  src/index.ts:54
     1  src/utils.ts:12
hyn-lei commented

上面的错误我也看到了，不过已经编译出来js 文件，我就没管了。

执行 rpm run build，重新编译生成dist 文件夹中内容，关闭 PicGo，将生成的 dist 文件复制到 PicGo用户数据目录中的 node_modules\picgo-plugin-compress 覆盖即可。

boringhex-top commented

上面的错误我也看到了，不过已经编译出来js 文件，我就没管了。

执行 rpm run build，重新编译生成dist 文件夹中内容，关闭 PicGo，将生成的 dist 文件复制到 PicGo用户数据目录中的 node_modules\picgo-plugin-compress 覆盖即可。

刚试了下，还是不行，放弃了，先用另一个

kowyo commented

为什么作者不更新

liujinpen commented

为什么作者不更新

我自己模仿也写了一个，可以试试，用的tinify的API
https://www.npmjs.com/package/picgo-plugin-tinypng

  • 👍3
supine0703 commented

已解决：#71