將繪圖從畫布保存到本地文件夾

我正在開發具有簽名捕獲和存儲功能的Web應用程序。我已經完成了使用畫布繪製的圖像餐飲。將繪圖從畫布保存到本地文件夾

這裏是我的代碼：

<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的東西來獲得最多的跨瀏覽器解決方案。

對於Chrome和Firefox，你可以使用這樣的事情：

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

將繪圖從畫布保存到本地文件夾

回答

相關問題