Question

我目前正在制作一个由烧瓶托管的应用程序。

我试图在我的画布上绘制用户所做的绘图，然后为它们保存，下面的代码是保存我的画布的意思：

$(document).on("click", "#savepng", function(){
        canvas.isDrawingMode = false;

        if(!window.localStorage){alert("This function is not supported by your browser."); return;}
        console.log(canvas.toDataURL())
        var html="<img src='"+canvas.toDataURL()+"' alt='canvas image'/>";
        var newTab=window.open();
        newTab.document.write(html);
    });

当我点击保存新选项卡时打开并且没有错误显示但是问题是选项卡是空白的时候显示我的图像，我做了一个控制台登录toDataRrl值，它只是一个空白的png即使我每次我测试它时画在画布上。下面是我创建一个简单画布的代码：

<canvas id="sheet" width="400" height="400"></canvas>
        <button id="savepng">Save as PNG</button>

var canvas = new fabric.Canvas('sheet', { isDrawingMode: true });

    window.onload=function(){
        var canvas = new fabric.Canvas('sheet');
        canvas.isDrawingMode = true;
        canvas.freeDrawingBrush.width = 5;
        canvas.freeDrawingBrush.color = "#ff0000";
    }

Answer 1

$(document).on("click", "#savepng", function() {
    canvas.isDrawingMode = false;
    var newTab = window.open();
    var img = new Image();
    img.onload = function() {
        newTab.document.body.append(img);
    }
    img.src = canvas.toDataURL({
        format: 'image/png'
    });
});

您可以创建一个image（）元素和onload事件，将该图像元素附加到body。这是jsFiddle Demo。

保存fabricjs画布时，PNG为空白

1 个答案: