0

これは少し苛立たしい問題です。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の画像を（テストとして）保存しましたが、保存される画像は黒で、キャンバスの背景を無視しているようです。

すべての助けをありがとう！

4

1 に答える 1

4

キャンバスの背景が透明になっていませんか? JPEG は透明な背景をサポートしていません。

透明な背景がある場合は、最初に白い背景を描画してから、JPEG として保存してください。

于 2012-07-23T02:39:46.580 に答える