Javascript画布空白图片 [英] Javascript Canvas Blank Image

问题描述

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

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.

我的代码是：

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 的图像时，画布将为空。

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.

这篇关于Javascript画布空白图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！