Question

我正在开发一个项目，用户可以在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();
    },
});

输出是透明图像。什么可能是我跳过的问题或任何其他不让我的代码渲染的事情。感谢。

Answer 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”的正文新画布。

html2canvas插件生成透明图像。

1 个答案: