Javascript Canvas Blank Image

问题

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; 

回答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.

来源：https://stackoverflow.com/questions/33445758/javascript-canvas-blank-image