javascript - 将 Canvas 对象另存为图像 - 黑色背景

Question

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

因此，图表已构建并插入到 Canvas 中。该图像的背景是白色的(就像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 的图像(作为测试)，但保存的图像是黑色 - 显然忽略了 Canvas 背景。

感谢您的帮助!

Answer 1

您确定 Canvas 没有透明背景吗？ JPEG 不支持透明背景。

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