当调用canvas.toDataURL时，为什么从rasterizeHTML.drawHTML的部分是黑色的？ [英] When calling canvas.toDataURL, why is the part from rasterizeHTML.drawHTML black?

问题描述

我有一个按钮，当它按下它调用 common_save_project（）。现在发生的是画布在屏幕上正确生成，但是由 canvas.toDataURL 创建的图像是黑色的，其中 rasterizeHTML.drawHTML 被调用。我使用 http://cburgmer.github.io/rasterizeHTML.js/ 。 / p>

以下是相关代码：

  function common_save_project $ b {
 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）。 
 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之后）：

解决方案

如果你再次重新声明canvas来保存， p>

尝试此操作：

 < 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> 
  

I have a button and when it is pressed it calls common_save_project(). What happens right now is the canvas is produced correctly on the screen, but the image that is created by canvas.toDataURL is black where rasterizeHTML.drawHTML was called. I am using http://cburgmer.github.io/rasterizeHTML.js/.

Here is the relevant code:

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

Original:

After rasterizeHTML.drawHTML:

Final result (after canvas.toDataURL):

解决方案

It will work fine if you will re-declare the canvas again for saving.

Try this:

<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>

这篇关于当调用canvas.toDataURL时，为什么从rasterizeHTML.drawHTML的部分是黑色的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！