Image from canvas 2D all black

Questions
,
1

Hi,

I’m trying to rescale Image before loading it into a texture.
After research, i found that using a canvas in context 2D (create on the fly) is a one of solution to rescale image:

function scaleImage(imageUrl, resizeWPourcent = 0, resizeHPourcent = 0){
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var img = new Image();

        img.onload = function () {              

            canvas.width = img.width * resizeWPourcent;
            canvas.height = img.height * resizeHPourcent;           
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);                 

        }
     
        img.src = imageUrl;        
        var texture = new THREE.Texture( canvas );
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        texture.needsUpdate = true; 
        return texture;
    }

My image is displayed on a quad in a 3D space but sadly everything is black…

I’ve read that it could be a pb of non square image but i’m using webgl 2 render…

So any idea?

Thx

2

Try to set texture.needsUpdate = true; in the onload callback function.

3

Hi,

Thx for the answer :)…i’ve tryed but it’s not working.
but now it’all white! :wink:

    function scaleImage(imageUrl, resizeWPourcent = 0, resizeHPourcent = 0){
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var img = new Image();
        var texture ;
        img.onload = function () {              

            //step 1 : divide by two each size
            canvas.width = img.width * resizeWPourcent;
            canvas.height = img.height * resizeHPourcent;
            console.log("taille canvas: " + canvas.width + ", " + canvas.height);
            console.log("taille img: " + img.width + ", " + img.height);
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);     
            
            //step 2 : get a texture from the canvas
            texture = new THREE.Texture( canvas );
            texture.needsUpdate = true; 
            
           

        }

        img.src = imageUrl;      
        return texture;
       
    }
4

I’ve meant live so:

function scaleImage(imageUrl, resizeWPourcent = 0, resizeHPourcent = 0){

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var img = new Image();

    img.onload = function () {              

        canvas.width = img.width * resizeWPourcent;
        canvas.height = img.height * resizeHPourcent;           
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);   
        texture.needsUpdate = true;               

    }
 
    img.src = imageUrl;        
    var texture = new THREE.Texture( canvas );
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    
    return texture;
}
1 Like
5

ooooooooooooooh yes!! Perfect! it works!
code-26

6

thx!:slight_smile:
the pb is solved.

1 Like