当调用canvas.toDataURL时，为什么从rasterizeHTML.drawHTML黑色部分？

我有一个按钮，当它被按下时，它调用common_save_project()。现在发生的情况是画布在屏幕上正确生成，但由canvas.toDataURL创建的图像为黑色，其中rasterizeHTML.drawHTML被调用。我正在使用http://cburgmer.github.io/rasterizeHTML.js/。当调用canvas.toDataURL时，为什么从rasterizeHTML.drawHTML黑色部分？

下面是相关代码：

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

rasterizeHTML.drawHTML后：

Canvas

最终结果（canvas.toDataURL后）：

My Project

来源

2014-07-01 AllisonC

如果您将重新宣布保存画布，它将正常工作。

试试这个：

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

来源

2014-09-10 15:31:15

当调用canvas.toDataURL时，为什么从rasterizeHTML.drawHTML黑色部分？

回答

相关问题