캔버스에서 로컬 폴더로 도면 저장

서명 캡처 및 저장 기능을 갖춘 웹 응용 프로그램을 개발 중입니다. 캔버스 드로잉을 사용하여 이미지 케이터링을 수행했습니다.캔버스에서 로컬 폴더로 도면 저장

<html> 
<head> 
    <style> 
     body { 
      margin: 0px; 
      padding: 0px; 
     } 
     .btn { 
      padding: 10px; 
      position: absolute; 
      /*top: 5px;*/ 
      left: 1130px; 
     } 
     .img { 
      padding: 10px; 
      width: 300px; 
      height: 300px; 
      position: absolute; 
      background-color: white; 
      top: 50px; 
      left: 1100px; 
     } 
     .btn2 { 
      padding: 10px; 
      position: absolute; 
      /*top: 5px;*/ 
      left: 1180px; 
     } 
    </style> 
    <meta charset="UTF-8"> 
    <script src="js/signature.js"></script> 

    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
</head> 
<body> 
    <canvas id="cbook" width=1100 height=732> </canvas> 
    <div id="bottext"><b></b> draw signature here</div> 
    <div id="toptext">signature capture - test </div> 
    <div><input type="button" id="clear" class="btn" value="Clear"> 
     <input type="button" id="save" class="btn2" value="Save"></div> 
    <img id="canvasImg" class="img" alt="Right click to save me!"> 
    <script> 
     var canvas = document.getElementById('cbook'); 
     var context = canvas.getContext('2d'); 
     // bind event handler to clear button 
     document.getElementById('clear').addEventListener('click', function() { 
      context.clearRect(0, 0, canvas.width, canvas.height); 
     }, false); 
     document.getElementById('save').addEventListener('click', function() { 
      // save canvas image as data url (png format by default) 
      var dataURL = canvas.toDataURL(); 
      alert(""); 
      // set canvasImg image src to dataURL 
      // so it can be saved as an image 
      document.getElementById('canvasImg').src = dataURL; 
     }, false); 
    </script> 
</body>

가 내 로컬 폴더에 서명 이미지를 저장하려면 :

여기 내 코드입니다. 아무도 이것을 할 수있는 방법을 제안 할 수 있습니까? 제안 해 주셔서 감사합니다.

출처

2014-02-21 Neenu

대부분의 크로스 브라우저 솔루션을 얻으려면 FileSaver.js와 같은 것을 사용하는 것이 좋습니다.

는 크롬과 파이어 폭스의 경우이 같은 것을 사용할 수 있습니다

var downloadLink = document.getElementById('my-anchor-tag'); 

downloadLink.href = dataURL; 
downloadLink.setAttribute('download', 'file-name.png');

참고 : 당신은 다운로드뿐만 아니라 HTML에 정적 속성을 설정할 수 있습니다.

IE의 경우 공급 업체별 msSaveBlobAs() 메서드를 사용할 수 있습니다. 그 여기에 대한 자세한 정보 : 다시 http://msdn.microsoft.com/en-us/library/ie/hh779016(v=vs.85).aspx

FileSaver.js는 여기에서 찾을 수있는 최고의 크로스 브라우저 솔루션 중 하나를 https://github.com/eligrey/FileSaver.js/

출처

2014-02-21 07:06:02 jordan

이 같은 대답입니다 : http://stackoverflow.com/questions/6045603/name- a-png 파일 저장 대화 상자를 사용하여 대화 상자에서 저장 – jordan

캔버스에서 로컬 폴더로 도면 저장

답변

관련 문제