Pass headers in fabric Image.fromURL function

Question

I am using fabric.js Image.fromURL function to load the image to canvas. For now, the images are loading successfully without any issues. But now I have a requirement to pass headers for authentication purposes is there a way that I could pass headers into the "Image.fromURL" function or any other way I could incorporate my headers to it.

Answer 1

Image.fromUrl doesn't send a request. As you can see here in source code this function uses fabric.util.loadImage , that as you can see here creates an image and set src attribute. Thus the browser makes the request for getting the image itself. And you cannot send your own headers using Image.FromURL function

I think you can get your images something like this (it's just idea):

const image = new Image();
image.onload = () => {
  const fabricImage = new fabric.Image(image);
  canvas.add(fabricImage);
}

fetch("https://your-url", {headers: {}}).then((res)=>{
  image.src = res;
})