導出基於ID的畫布圖形

我的頁面上有多個畫布圖形，每個圖形都有導出的選項。我目前的問題是，我所有的出口導出相同的第一個畫布/圖，我意識到問題是，它正在尋找canvas標籤名稱和下載，但我想指定下載哪個畫布，所以我可以下載所有圖形單獨。導出基於ID的畫布圖形

這裏是我的HTML：

組件文件：

exportGraph(event:any){ 
    var anchor = event.target; 
    anchor.href = document.getElementsByTagName('canvas')[0].toDataURL(); 
    anchor.download = "export.png"; 
    }

我怎麼可以指定導出圖像，使其在下載每一個合適的畫布 - 像傳遞帆布id可能或畫布所在的div的ID。

來源

2017-05-05 bluePearl

如果你可以添加一個ID，你的畫布中的每一個，

exportGraph(event:any){ 
    var anchor = event.target; 
    anchor.href = event.target.parentElement.previousElementSibling.toDataURL(); 
    anchor.download = "export.png"; 
    }

應該工作，應該下載的canvas元素是直接的div持有基於關閉您提供的示例代碼錨前。

我沒有角的設置，但現在我沒有得到這個有工作：

<script> 
function exportGraph(){ 
    var anchor = event.target; 
    anchor.href = event.target.parentNode.previousElementSibling.toDataURL(); 
    anchor.download = "export.png"; 
    } 
</script> 
<canvas height="260"> 

</canvas> 

<div class="panel-footer"> 
    <a href="#" onClick="exportGraph()">Export Graph</a> 
</div>

來源

2017-05-05 15:42:22

所以，如果我有6個帆布/圖將我已經6次與6種不同的寫這個exportGraph功能ID的？ – bluePearl

@bluePearl哎呀，對不起，我錯過了部分示例代碼，查看我的更新答案。如果它們與您提供的hmtl格式相同，則這適用於所有圖形。 –

當我試過這個 - 每次我點擊導出鏈接頁面重新加載，但沒有下載。 – bluePearl

導出基於ID的畫布圖形

回答

相關問題