將畫布對象保存爲圖像 - 黑色背景

Question

這是一個稍微令人沮喪的問題。我使用名爲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的圖像的圖表，所有這些都具有白色背景（其爲右）（作爲測試），但保存的圖像是黑色 - 顯然忽略畫布背景。

感謝您的幫助！

Answer 1

您確定畫布沒有透明背景嗎？ JPEG不支持透明背景。

如果它具有透明背景，請先嚐試在其上繪製白色背景，然後將其另存爲JPEG。