javascript - 调用canvas.toDataURL时，为什么rasterizeHTML.drawHTML部分是黑色的？

Question

我有一个按钮，当按下它时，它会调用common_save_project()。现在发生的情况是 Canvas 在屏幕上正确生成，但调用 rasterizeHTML.drawHTML 时由 canvas.toDataURL 创建的图像是黑色的。我正在使用http://cburgmer.github.io/rasterizeHTML.js/ .

相关代码如下:

function common_save_project()
{
  var image = common_screenshot();
  $.ajax
  (
    {
      type: "POST",
      processData: false,
      url:  SITE_URL + "/system/xml/import/" + app_type + "/" + session_id + "/?prjid=" + project_id,
      data: "xml=" + common_order_xml + "&prodid=" + product_id + "&file=" + image.src
    }
  ).done(function( msg ) 
  {
      console.log("Project saved. " + msg);
  });
}

function common_screenshot()
{
  var canvas = document.getElementById("save_image_canvas");
  var ctx = canvas.getContext('2d');
  if (typeof(moulding_canvas) === "undefined")
  {
    canvas.height = parseInt($("#matte_canvas").height());
    canvas.width = parseInt($("#matte_canvas").width());
  }
  else
  {
    canvas.height = parseInt($("#moulding_canvas").height());
    canvas.width = parseInt($("#moulding_canvas").width());
  }
  canvas.style.backgroundColor = "#FFFFFF";

  var moulding_top = 0;
  var moulding_left = 0;
  if (document.getElementById("moulding_canvas"))
  {
    moulding_top = -1 * parseInt(document.getElementById("moulding_canvas").style.top);
    moulding_left = -1 * parseInt(document.getElementById("moulding_canvas").style.left);
  }

  var mattes_html = document.getElementById("mattes").innerHTML;
  mattes_html = mattes_html.replace(/<\/?script\b.*?>/g, "");
  mattes_html = mattes_html.replace(/ on\w+=".*?"/g, "");
  rasterizeHTML.drawHTML(mattes_html).then(function (renderResult) 
  {
    ctx.drawImage(renderResult.image, moulding_left, moulding_top);
  });

  ctx.drawImage(matte_canvas, moulding_left, moulding_top);
  if (typeof(moulding_canvas) !== "undefined")
  {
    ctx.drawImage(moulding_canvas, 0, 0);
  }
  var image = new Image();
    image.src = canvas.toDataURL("image/jpeg");
  return image;
}

原文:

rasterizeHTML.drawHTML 之后:

最终结果(在canvas.toDataURL之后):

Answer 1

如果您再次重新声明 Canvas 进行保存，它将正常工作。

试试这个:

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    rasterizeHTML.drawHTML('<h1>hello Im here</h1>Some <span style="color: green; font-size: 20px;">HTML</span>', canvas);

    $('#saveImg').click(function(){
        var canvas = document.getElementById("canvas");
        var dataURL = canvas.toDataURL("image/png");
        window.open(dataURL, "toDataURL() image", "width=600, height=200");
    });
</script>