'Error: node-canvas was built without JPEG support

/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() + '" />')
    })

Environment: [email protected] [email protected] macOS Big Sur 11.1 MacBook Pro (13-inch, M1, 2020) Apple M1

Solution 1:^[1]

I ran into the same issue. Luckily there has been a fix for that on 11 Nov 2021 (11 days ago).

EDIT (25th Jan, 2022):

A new canvas version (2.9.0) has been released, so the issue should not occur anymore.

npm install [email protected]

ORIGNAL ANWSER:

Just run the following command to install canvas directly from Github. This commit is (today) the most recent commit to master and fixes this issue explicitly.

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

The commit:

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

Additional sources I have used:

Some other people suggested to also set some ENV variables, but this wasn't necessary in my case. I use MacBook Pro with (Apple M1 Pro).

Another things I had to do was installing canvas dependencies to build canvas from source (you probably already did this):

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Error: node-canvas was built without JPEG support

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]