캔버스에 데이터가 작동하지 않습니다.

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();">

그것은 링크입니다에 인코딩, 그래서 # /가는 방지하기 위해 클릭 이벤트에 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