Javascript画布空白图像

我想用FabricJs做一件T恤定制。 一切正常。。我可以上传图像并将其加载到画布中。 图像放在T恤上，但如果我想看到（或发送到服务器）画布图像，我会得到一个空白图像

我的代码是：

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; 

---

看起来您应该在

canvas.toDataURL

内部

imgObj.onload

---

否则，图像将不会绘制到FabricJS画布上，并且在您使用

将其转换为图像时，画布将为空。toDataURL

我不理解这个问题。该图像是透明图像。看起来您应该在

canvas.toDataURL

内部

imgObj.onload

。否则FabricJS画布将是空的。将评论作为答案发布，以便我可以接受它。谢谢