Error: node-canvas was built without JPEG support

[NikyPeng]

Issue or Feature

canvasdemo@1.0.0 dev
node index.js

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

Error: node-canvas was built without JPEG support
at setSource (/Users/pengcheng/pc/canvas/node_modules/canvas/lib/image.js:91:13)
at Image.set (/Users/pengcheng/pc/canvas/node_modules/canvas/lib/image.js:62:9)
at /Users/pengcheng/pc/canvas/node_modules/canvas/index.js:34:15
at new Promise ()
at loadImage (/Users/pengcheng/pc/canvas/node_modules/canvas/index.js:23:10)
at Object. (/Users/pengcheng/pc/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)

Steps to Reproduce

const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

// Write "Awesome!"
ctx.font = '30px Impact'
ctx.rotate(0.1)
ctx.fillText('Awesome!', 50, 100)

// Draw line under text
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()

// Draw cat with lime helmet
loadImage('./2.jpg').then((image) => {
  ctx.drawImage(image, 50, 0, 70, 70)

  console.log('<img src="' + canvas.toDataURL() + '" />')
})

Your Environment

• Version of node-canvas (output of npm list canvas or yarn list canvas): canvas@2.7.0
• Environment (e.g. node 4.2.0 on Mac OS X 10.8): noede@15.14.0 macOS Big Sur 11.1 MacBook Pro (13-inch, M1, 2020) Apple M1

[tupig-7]

You should install a program named "libjpeg-turbo".

[NikyPeng]

You should install a program named "libjpeg-turbo".

Thank you! I read the code for binding.gyp. An error was reported when it runs the command with "node ./util/has_lib.js jpeg". So I force the variable of "with_jpeg" to true, then run width node-gyp configure build, problem resolved. Your way, I will try it!
Thanks again!

[sonololo]

Thing is, it looks like that ./util/has_lib.js should also contain an /opt/homebrew/lib directory exactly because of M1 macs. Apple Silicon homebrew does not link anything into /usr/local/lib or /opt/local/lib, so has_lib.js utility fails to find anything, while jpeg is actually installed.

I've checked it on the older Mac with 10.14, libjpeg gets linked into /usr/local/lib. That's not the case on Big Sur/M1, of course.

Also export CPATH=/opt/homebrew/include should be set.

[aurelioolive]

I'm having this problem on my M1 too =/

[mike667]

I'm having same issue with jpeg (png works well). (apple m1)

Canvas.toDataURL with mime type image/jpeg, inside Canvas.toBuffer return undefined. (canvas/lib/canvas.js line 111).

Stack:
TypeError: Cannot read property 'toString' of undefined\n at Canvas.toDataURL (node_modules/canvas/lib/canvas.js:111:60)\n at HTMLCanvasElementImpl.toDataURL (node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:52:31)\n at HTMLCanvasElement.toDataURL (node_modules/jsdom/lib/jsdom/living/generated/HTMLCanvasElement.js:67:23)\n at Object.toDataURL (node_modules/fabric/dist/fabric.js:1212:23)\n at klass.toDataURL (/node_modules/fabric/dist/fabric.js:13680:26)\n at src/layout/routes.ts:46:38\n at Generator.next ()\n at fulfilled (src/layout/routes.ts:5:58)\n at processTicksAndRejections (node:internal/process/task_queues:94:5)"},"msg":"Cannot read property 'toString' of undefined

[sonololo]

• Add /opt/homebrew/lib into the list in the beginning of ./util/has_lib.js
• Do export CPATH=/opt/homebrew/include in ~/.zshrc

Should compile after that.

[aurelioolive]

• Add /opt/homebrew/lib into the list in the beginning of ./util/has_lib.js
• Do export CPATH=/opt/homebrew/include in ~/.zshrc

Should compile after that.

This didn't work for me. Do I need to run some other command?

[david-sabata]

Adding this into .zshrc helped in my case

export LDFLAGS="-L /opt/homebrew/lib"
export CPPFLAGS="-I /opt/homebrew/include"

[BE-CH]

I had the same issue:

at processTicksAndRejections (node:internal/process/task_queues:96:5) 
Error: Error: node-canvas was built without JPEG support

The above mentioned installs/steps did not solve it for me using Apple M1 Pro.

SOLUTION: Pull the latest version of node-canvas straight from github! (Issues was fixed in PR #1910).

Hopefully we can have an official release with the M1 fixed issues soon! Thanks for the good work.

[cryptofannatic]

Adding this into .zshrc helped in my case

export LDFLAGS="-L /opt/homebrew/lib"
export CPPFLAGS="-I /opt/homebrew/include"

@david-sabata how did you add this? Is there a certain folder did you go to using terminal and then run the command? sorry for the noob question.

[cryptofannatic]

run width node-gyp configure build

hey @NikyPeng, how do you run width node-gyp configure build ?

[ashok-cse]

const image = await loadImage(imageUrl);

console.log('image content: ', image);

no response if i put a jpg image url?

please guide me further

System: Macbook M2 Pro/ macOS Sonoma 14.0 (23A344)