How to load an image from blob using TextureLoader and assign the texture to a CanvasTexture

Questions
1

Hi,

I want to load an image and overlay annotations over it, using threejs together with FabricJS.

I started by using a TextureLoader to load an image into a texture element and it is working ok. (this is using threejs without fabricjs)
let texture = await new THREE_TextureLoader().loadAsync(imageBlobUrl);
In this case texture.image.width shows a correct value of 1280

I then changed the threejs object from Texture to CanvasTexture.
But when I load the texture without the TextureLoader, the imageWidth is incorrect and the image drawn incorrectly (e.g. not up-to scale and part of the image is clamped)
let texture = new THREE_CanvasTexture(document.getElementById("cnvs"));
In this case texture.image.width shows incorrect value (the command does not know anything about the image blob and texture.image.width is set to the size of the canvas).

Is there a way to load an image using TextureLoader and assign the texture to a CanvasTexture ?

2

If you are using FabricJS, you can directly plug the lower canvas to a CanvasTexture

const canvas = new fabric.Canvas('c');
const texture = new THREE.CanvasTexture(canvas.lowerCanvasEl)

Then listen to the canvas update events and update the texture accordingly:

canvas.on({
    'object:moving': updateTexture,
    'object:modified': updateTexture,
    'object:added': updateTexture,
    'object:removed': updateTexture,
    'selection:cleared': updateTexture,
    'selection:created': updateTexture,
    'selection:updated': updateTexture,
});

function updateTexture() { 
    texture.needsUpdate = true 
}

Here is a working example: