Javascript畫布空白圖像

Question

我正在嘗試使用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; 

Answer 1

看來您應該在canvas.toDataURL中執行imgObj.onload 。

否則，該圖像將不會被繪制到FabricJS畫布上，並且在您將其轉換為.toDataURL圖像時，該畫布將為空。