保存fabricjs画布时PNG为空白答案

【问题标题】：PNG is blank when saving fabricjs canvas保存fabricjs画布时PNG为空白
【发布时间】：2017-11-24 19:41:44
【问题描述】：

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

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

$(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";
    }

【问题讨论】：

检查这个fiddle，它的工作原理。
相同结果 png 显示为空白

标签： javascript fabricjs

【解决方案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 事件，将该图像元素附加到正文。这里是jsFiddle Demo。

【讨论】：