Javascript画布空白图像

Question

I am trying to make a tshirt customizer with FabricJs. Everything is working fine .. I can upload the image and load it into canvas. The image is placed on the tshirt, but if i want to see(or send to server) the canvas image i get a blank image.

My code is :

document.getElementById('imgLoader').onchange = function handleImage(e) {
        var reader = new FileReader();

        reader.onload = function (event) {

            var imgObj = new Image();
            imgObj.src = event.target.result;
            //imgObj.crossOrigin = 'anonymous';

            $('#imageCanvas').val(event.target.result);
            imgObj.onload = function () {
                // start fabricJS stuff
                imgObj.width = 100
                imgObj.height = 100

                var image = new fabric.Image(imgObj);
                image.set({
                    top: 100,
                    left: 100 ,
                    padding: 10,
                    cornersize: 10,
                });

                //image.scale(0.1).setCoords();
                canvas.add(image);

                // end fabricJS stuff
            }

        }
        reader.readAsDataURL(e.target.files[0]);
    }
 });//doc ready

var dataURL = canvas.toDataURL("image/png");
document.getElementById('canvasImg').src = dataURL; 

Answer 1

It looks like you should be doing canvas.toDataURL inside imgObj.onload .

Otherwise the image will not yet be drawn onto the FabricJS canvas and the canvas will be empty at the point you are converting it into an image with .toDataURL .