Firefox描画空のキャンバスを保存したBase64から復元するとき

Question

私は、ユーザーがウィンドウイメージのウィンドウペインをクリックできる単一のキャンバスを使って作業しています。アイデアは、ユーザーがクリックした場所を表示することです。イメージは（ウィンドウ上にグリルを描くことによって）変更され、JPEGに保存されます。私はキャンバス画像をクリック機能の前に保存しています。なぜなら、選択ボックスを最終画像に表示したくないからです。ただし、IEとChromeでキャンバスを復元していないキャンバスを復元すると、Firefoxに空白のキャンバスが表示されることがよくあります。これはChromeとIEで完全に機能します。助言がありますか？ FirefoxはtoDataURL()に問題がありますか？多分、ここで非同期の問題が起こっているのでしょうか？私はまた、この方法でキャンバスを保存することはメモリを大量に消費するので、これを行うためのより良い方法があるかもしれないが、私が持っているものと作業していることも認識しています。

コード：

/** 
    * Restores canvas from drawingView.canvasRestorePoint if there are any restores saved 
    */ 
    restoreCanvas:function() 
    { 
     var inverseScale = (1/drawingView.scaleFactor); 
     var canvas = document.getElementById("drawPop.canvasOne"); 
     var c = canvas.getContext("2d"); 
     if (drawingView.canvasRestorePoint[0]!=null) 
     { 
     c.clearRect(0,0,canvas.width,canvas.height); 
     var img = new Image(); 
     img.src = drawingView.canvasRestorePoint.pop(); 
     c.scale(inverseScale,inverseScale); 
     c.drawImage(img, 0, 0); 
     c.scale(drawingView.scaleFactor, drawingView.scaleFactor); 
    } 
    }, 
    /** 
    * Pushes canvas into drawingView.canvasRestorePoint 
    */ 
    saveCanvas:function() 
    { 
     var canvas = document.getElementById("drawPop.canvasOne"); 
     var urlData = canvas.toDataURL(); 
     drawingView.canvasRestorePoint.push(urlData); 
    }, 

使用例：

readGrillInputs:function() 
    { 
     var glassNum = ir.get("drawPop.grillGlassNum").value; 
     var panelNum = ir.get("drawPop.grillPanelNum").value; 

     drawingView.restoreCanvas(); 
     drawEngine.drawGrill(glassNum, panelNum,null); 
     drawingView.saveCanvas(); 
    }, 
    sortClick:function(event) 
    { 
     ..... //Sorts where user has clicked and generates panel/glass num 
     ..... 
     drawingView.showClick(panelNum, glassNum); 
    }, 
    showClick:function(panelNum, glassNum) 
    { 
     var glass = item.panels[panelNum].glasses[glassNum]; 
     var c = drawEngine.context; 
     drawingView.restoreCanvas(); 
     drawingView.saveCanvas(); 
     c.strokeStyle = "red"; 
     c.strokeRect(glass.x, glass.y, glass.w, glass.h); 
    }, 

Answer 1

だけimg.srcを設定するコードを見ることでは画像を取得するための非同期動作であるので、あなたがしようとすると、それを2行後にキャンバスに描画するには、まだロードされていない可能性があります（キャッシュに入れておくと、動作するほど速く戻ります）。

イメージがロードされたときに、代わりにimg.onload関数を使用してイメージを描画する必要があります。

restoreCanvas:function() 
{ 
    var inverseScale = (1/drawingView.scaleFactor); 
    var canvas = document.getElementById("drawPop.canvasOne"); 
    var c = canvas.getContext("2d"); 
    if (drawingView.canvasRestorePoint[0]!=null) 
    { 
    c.clearRect(0,0,canvas.width,canvas.height); 
    var img = new Image(); 
    img.onload = function() { 
     c.scale(inverseScale,inverseScale); 
     c.drawImage(img, 0, 0); 
     c.scale(drawingView.scaleFactor, drawingView.scaleFactor); 
    }; 
    img.src = drawingView.canvasRestorePoint.pop(); 
} 
},