Setting request headers for remote image requests

[rzumer]

Issue or Feature

Some websites block image requests made from canvas, for example Wikipedia. From Googling around it may be due to missing or invalid headers, e.g. User-Agent. Is there a way to set them currently? If not, please consider setting sane default headers or allowing the user to specify them for individual requests.

Steps to Reproduce

const Image = require('canvas');

async function getImage(src) {
    return new Promise(resolve => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = err => { console.log(err); resolve(null); };
        img.src = src;
    });
}

// will be null, and 403 error printed out to the console
var img = await getImage("https://upload.wikimedia.org/wikipedia/commons/4/48/Daala_Rainbow_Vomit_Tiger.png");

Your Environment

• Version of node-canvas (output of npm list canvas or yarn list canvas): [email protected]
• Environment (e.g. node 4.2.0 on Mac OS X 10.8): node v14.17.3 on Windows 10

[apollisa]

I’m also affected by this; will try to make a quick PR soon

[jimmywarting]

Almost think that a http library and Image shouldn't be part of the canvas core anymore
Think we should have a createImageBitmap function instead.

the way you would do it instead would be to:

import { OffscreenCanvas, createImageBitmap } from 'canvas'

// using NodeJS v18 fetch, undici or node-fetch. or fetch-blob/from.js to get a blob
const blob = await fetch(url).then(res => res.blob())
const bitmap = await createImageBitmap(blob)

// draw bitmap to a new offscreen canvas.
const canvas = new OffscreenCanvas(bitmap.width, bitmap.height)
// ...

This way you can make any request you like, changing user agent, Method, credentials etc. also changing accept header to allow for any image/*