将画布对象另存为图像-黑色背景

这是一个稍微令人沮丧的问题。我正在使用一个名为Javascript InfoVis Toolkit的第三方库来生成画布图像图表。

因此，图表被构建并插入到画布中。该图像的背景是白色的（像css中的样式），但当我转换图像时（我尝试了不同的库并一起打开了一个新窗口），它是黑色的。

<script type="text/javascript">
    function saveImage(div_id) {
        var canvas = document.getElementById("chart2-canvas");
        Canvas2Image.saveAsJPEG(canvas);
    }
</script>
<script type="text/javascript">
    function init(jsonString, num){
        var json = jsonString
        var inj = 'chart' + num
        var st = new $jit.ST({
            injectInto: inj,
            offsetX:25,
            offsetY:900,
            transition: $jit.Trans.Quart.easeInOut,
            orientation: 'top',
            Node: {
                height:100,
                width:100,
                type: 'rectangle',
                color: '#EEE',
                overridable: true
            },
            Edge: {
                type: 'line',
                color: '#512',
                overridable: true
            },
            Label: {
                type: 'Native',
                color: '#000000'
            },
            Tips: { 
                enable: false,
                onShow: function(tip, node, isLeaf, domElement){
                    var html = "<p><b>" + node.name + "</b></p><br/>";
                    var data = node.data
                    if(data.image) {
                        html += "<img src='""+ data.image +"'" width=50 height=65  class='"album'" />";
                    }
                    if(data.email) {
                        html += "<p>"+data.email+"</p>";
                    }
                    if(data.title) {
                        html += "<p>"+data.title+"</p>";
                    }
                    if(data.phone) {
                        html += "<p>"+data.phone+"</p>";
                    }
                    tip.innerHTML = html; 
                }       
            }/*, 
            onCreateLabel:function(label,node) {
                alert(node.name);
                alert(node.data);
                var html = "<b>" + node.name + "</b>";
                var data = node.data;
                if(data.title) {
                    html += "<br/><br/><i>" + data.title + "</i>";
                }
                label.id = node.id + "_" + num;
                label.innerHTML = html;
                var style = label.style;
                style.width = 100 + 'px';
                style.height = 100 + 'px';
                style.cursor = 'pointer';
                style.fontSize = '0.8em';
                style.textAlign = 'center';
                style.color='#321';
            }*/
        });
        st.loadJSON(json);
        st.compute();
        st.onClick(st.root);
    }
</script>
<a href="#" onclick="javascript:saveImage('chart1');">Save Image</a>
<g:each in="${allJSON}" status="h" var="jsonInstance">
    <div id="chart${h+1}">
        <script type="text/javascript">
            init(${jsonInstance}, ${h+1});
        </script>
    </div>
</g:each>

概括一下：

1. 我在代码中生成图表，所有图表都有白色背景（没错）
2. 我保存了图表2的图像（作为测试），但保存的图像是黑色的——显然忽略了画布背景

谢谢你的帮助！