html2canvas 插件生成透明图像。答案

【问题标题】：html2canvas plugin producing a transparent Image.html2canvas 插件生成透明图像。
【发布时间】：2014-07-10 00:55:01
【问题描述】：

我正在开发一个项目，用户可以在其中更改 div 中某些元素的 css 属性，然后在提交时，我正在为该 div 保存 html2canvas 以保存图像。图像正在保存，但它是透明的。没有反映更改。

HTML 标记：

<div id="mainCanvas">
    <div id="imageOne"></div>
    <span id="txtOne" class="clTxtOne">Absolute Fun</span>
    <span id="txtTwo" class="clTxtTwo">Some Text</span>
    <span id="txtThree" class="clTxtThree">Another Text</span>
    <span id="slogan">Slogan here</span>
</div>

JS：

$('#mainCanvas').html2canvas({
    background  : undefined,
    logging: true,
    taintTest: false,

    onrendered: function (canvas){
        //Set hidden field's value to image data (base-64 string)
        $('#capturedImage').val(canvas.toDataURL("image/png"));
        //Submit the form manually
        document.getElementById("saveImageForm").submit();
    },
});

输出是透明图像。我正在跳过的可能问题是什么，或者其他任何不让我的代码呈现的问题。谢谢。

【问题讨论】：

标签： javascript jquery css html2canvas

【解决方案1】：

我尝试在 JSFiddle 中重新创建您的任务并立即使其工作。我使用了来自http://html2canvas.hertzen.com/documentation.html 的文档。

试着像这样写你的函数：

    html2canvas($("#mainCanvas"), {
        onrendered: function(canvas) {
            $('#capturedImage').val(canvas.toDataURL("image/png"));
            document.getElementById("saveImageForm").submit();
        }
    });

这是我的JSFiddle 工作示例... 尝试通过点击“更改背景颜色”按钮更改背景，然后按“追加新的”以从 HTML div“mainCanvas”生成并附加到正文新画布。

【讨论】：