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

这是一个稍微令人沮丧的问题。我正在使用名为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>

函数saveImage（div\u id）{
var canvas=document.getElementById（“chart2画布”）；
Canvas2Image.saveAsJPEG（画布）；
}
函数init（jsonString，num）{
var json=jsonString
变量inj='图表'+num
var st=新的$jit.st({
注射：注射，
抵销额：25，
副职：900，
转换：$jit.Trans.Quart.easeInOut，
定位：'顶部'，
节点：{
身高：100，
宽度：100，
键入：“矩形”，
颜色：“#EEE”，
可重写：true
},
边缘：{
键入：“行”，
颜色：'#512'，
可重写：true
},
标签：{
键入：“本机”，
颜色：'#000000'
},
提示：{
启用：false，
onShow：函数（提示、节点、isLeaf、domeElement）{
var html=“”+node.name+”

”；
var data=node.data
if（data.image）{
html+=“”；
}
如果（data.email）{
html+=“”+data.email+“
”；
}
if（数据标题）{
html+=“”+data.title+“
”；
}
如果（数据.电话）{
html+=“”+data.phone+“
”；
}
tip.innerHTML=html；
}       
}/*, 
onCreateLabel:函数（标签，节点）{
警报（节点名称）；
警报（节点数据）；
var html=“”+node.name+”；
var data=node.data；
if（数据标题）{
html+=“

”+data.title+”；
}
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）；
}
init（${jsonInstance}，${h+1}）；

重述：

我在代码中生成图表，所有图表都有白色背景（正确）

我保存了图表2的图像（作为测试），但是保存的图像是黑色的——显然忽略了画布背景

---

谢谢你的帮助

您确定画布没有透明背景吗？JPEG不支持透明背景

---

如果画布有透明背景，请先尝试在其上绘制白色背景，然后将其另存为JPEG。

您确定画布没有透明背景吗？JPEG不支持透明背景

---

如果它有透明背景，请尝试先在其上绘制白色背景，然后将其另存为JPEG。

我刚刚修改了图像以另存为PNG。它起作用了。JPEG和透明背景有些问题。所有这些挫折都是徒劳的。我只是修改了我的图像以保存为PNG。它起作用了。JPEG和透明背景有些问题。所有的挫折都是徒劳的。。