Javascript Canvas 空白图片

Question

我正在尝试使用 FabricJs 制作 T 恤定制器。一切正常。我可以上传图像并将其加载到 canvas。图片放在 T 恤上，但如果我想查看（或发送到服务器）canvas 图片，我会得到一张空白图片。

我的代码是：

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

看起来你应该在 imgObj.onload 里面做 canvas.toDataURL。

否则图像将不会被绘制到 FabricJS canvas 并且 canvas 在您使用 .toDataURL 将其转换为图像时将为空。

Javascript Canvas 空白图片

Javascript Canvas Blank Image

html

javascript

canvas

fabricjs