Javascript Canvas Blank Image

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

看起来您应该在canvas.toDataURL内进行imgObj.onload。

否则，图像将不会被绘制到FabricJS画布上，并且在您将其转换为.toDataURL的图像时，画布将为空。