Сохранить рисунок с холста в Локальная папка

Я разрабатываю веб-приложение с функциями захвата и хранения подписей. Я сделал изображение кейтеринга с использованием холста рисунок.Сохранить рисунок с холста в Локальная папка

Вот мой код:

<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- а-PNG-файл сохраняемый-из-холста-использование-ан-открытый с-диалога – jordan

Сохранить рисунок с холста в Локальная папка

ответ

Смежные вопросы