Firefox 从保存的 base64 恢复时绘制空白画布答案

【问题标题】：Firefox drawing blank Canvas when restoring from saved base64Firefox 从保存的 base64 恢复时绘制空白画布
【发布时间】：2016-07-24 06:06:28
【问题描述】：

我正在使用允许用户单击窗口图像中的窗格的单个画布。这个想法是显示用户点击的位置。然后将修改图像（通过在窗口上绘制格栅），然后以 JPEG 格式保存。我在单击功能之前保存画布图像，因为我不希望选择框显示在最终图像中。但是，Firefox 在恢复画布时通常会显示空白画布，而 IE 和 Chrome 则不会。这在 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);
    },

【问题讨论】：

标签： javascript html firefox canvas base64

【解决方案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();
 }
},

【讨论】：