畫布到數據網址不能正常工作

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/html2canvas.js"></script> 
    <script src="js/canvas2image.js"></script> 

    <script> 
    function mypng(){ 
    var c=document.getElementById("picture"); 
    var dataURL = c.toDataURL("image/png"); 
    alert(dataURL); 
    } 
    </script> 


    <a id="jpeg" href="#" onclick="mypng();"> 

    <canvas id="picture"></canvas> 

但沒有任何反應，沒有運行該功能。

當然我正在畫布上生成一個圖像。如果我右擊圖像，然後選擇查看此圖像，我可以正確地看到並用base64 URL

Answer 1

<a id="jpeg" href="#" onclick="mypng();">

這是一個鏈接編碼，等等click事件返回false，以防止將/＃。

<a id="jpeg" href="#" onclick="mypng(); return false;">

編輯：

而且，你不要關閉<a>標籤。

試試這個：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="js/html2canvas.js"></script> 
<script src="js/canvas2image.js"></script> 

<script> 
function mypng(){ 
    var c=document.getElementById("picture"); 
    var dataURL = c.toDataURL("image/png"); 
    alert(dataURL); 
    event.preventDefault(); 
} 
</script> 


<a id="jpeg" href="#" onclick="mypng();">LINK</a> 

<canvas id="picture"></canvas> 

FIDDLE