fabricjsキャンバスを保存するときにPNGが空白になる

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); 
    }); 

のIは、新しいタブを保存ヒットエラーは表示されませんが、画像が表示されるときにタブが空白になっているので、私はキャンバスをテストするたびにキャンバスを描いていましたが、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' 
    }); 
}); 

は、あなたが身体にその画像要素を追加した画像（）要素とのonloadイベントを行うことができます。ここにはjsFiddle Demoがあります。