错误：节点画布是在没有 JPEG 支持的情况下构建的

Posted 2023-03-14

【中文标题】错误：节点画布是在没有 JPEG 支持的情况下构建的

【英文标题】：Error: node-canvas was built without JPEG support

【发布时间】：2021-07-05 22:17:42

【问题描述】：

/Users/demo/canvas/node_modules/canvas/lib/image.js:91 SetSource.call(img, src); ^

Error: node-canvas was built without JPEG support
at setSource (/Users/demo/canvas/node_modules/canvas/lib/image.js:91:13)
at Image.set (/Users/demo/canvas/node_modules/canvas/lib/image.js:62:9)
at /Users/demo/canvas/node_modules/canvas/index.js:34:15
at new Promise ()
at loadImage (/Users/demo/canvas/node_modules/canvas/index.js:23:10)
at Object. (/Users/demo/canvas/index.js:19:1)
at Module._compile (node:internal/modules/cjs/loader:1092:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
at Module.load (node:internal/modules/cjs/loader:972:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)

    const  createCanvas, loadImage  = require('canvas')
    const canvas = createCanvas(200, 200)
    const ctx = canvas.getContext('2d')
    ctx.font = '30px Impact'
    ctx.rotate(0.1)
    ctx.fillText('Awesome!', 50, 100)
    var text = ctx.measureText('Awesome!')
    ctx.strokeStyle = 'rgba(0,0,0,0.5)'
    ctx.beginPath()
    ctx.lineTo(50, 102)
    ctx.lineTo(50 + text.width, 102)
    ctx.stroke()
    loadImage('./2.jpg').then((image) => 
      ctx.drawImage(image, 50, 0, 70, 70)
    
      console.log('<img src="' + canvas.toDataURL() + '" />')
    )

环境： canvas@2.7.0 noede@15.14.0 macOS Big Sur 11.1 MacBook Pro（13 英寸，M1，2020） 苹果 M1

【参考方案1】：

我遇到了同样的问题。幸运的是，已在 2021 年 11 月 11 日（11 天前）修复了该问题。

编辑（2022 年 1 月 25 日）：

一个新的画布版本（2.9.0）已经发布，所以这个问题应该不会再出现了。

npm install canvas@2.9.0

原始答案：

只需运行以下命令即可直接从 Github 安装画布。此提交是（今天）对 master 的最新提交，并明确修复了此问题。

npm install canvas@github:Automattic/node-canvas#198080580a0e3938c48daae357b88a1638a9ddcd

提交：

https://github.com/Automattic/node-canvas/commit/198080580a0e3938c48daae357b88a1638a9ddcd

我使用的其他来源：

https://github.com/Automattic/node-canvas/pull/1910 https://github.com/Automattic/node-canvas/issues/1782

其他一些人建议也设置一些 ENV 变量，但在我的情况下这不是必需的。我将 MacBook Pro 与 (Apple M1 Pro) 一起使用。

我必须做的另一件事是安装画布依赖项以从源代码构建画布（您可能已经这样做了）：

brew install pkg-config cairo pango libpng jpeg giflib librsvg libjpeg-turbo