Сохранить изображение на жесткий диск

Question

Я использую изображение для загрузки изображения на холст.
Я бы хотел, чтобы мой пользователь смог сохранить изображение на своем жестком диске.

Я искал вокруг, и есть много способов сделать это, ЕСЛИ Я использую Ajax и извлекаю с моего сервера.

Есть ли способ, чтобы избежать каких-либо поездок на мой сервер и сохранить непосредственно на жесткий диск компьютера или через графический элемент управления или контроля холст

Answer 1

Вы действительно можете получить необходимый эффект, используя HTML5 download attribute.

шаги будут:

1. Создай свой образ с холстом
2. Append невидимую связь с download атрибутом
3. Trigger по ссылке onclick событий
4. Удалить скрытую ссылку

Что-то вроде этого:

myCanvas = document.getElementById("myCanvas"); 

$("body").append("<a id='hiddenLink' href='" + myCanvas.toDataURL() + "' style='display:none;' download>Download Pic</a>"); 
$("#hiddenLink")[0].click(); 
$("#hiddenLink").remove(); 

Вы можете увидеть здесь работать: http://jsfiddle.net/wLd4yf7k/

Один вопрос: не все браузеры поддерживают его: http://caniuse.com/#feat=download

---

А вот у вас есть решение, используя исключительно JavaScript (не JQuery) , так как я вижу, что вы не добавили тег jQuery к вопросу:

myCanvas = document.getElementById("myCanvas"); 

a = document.createElement("a"); 
a.href = myCanvas.toDataURL(); 
a.download = "download"; 
a.click(); 

Вы можете видеть это w orking на скрипке: http://jsfiddle.net/wLd4yf7k/1/

Answer 2

Таким образом, вы можете почти сделать это. В своем комментарии я упоминаю генератор PDF, который создает и загружает файл PDF. Это работает, потому что при открытии pdf-файла автоматическое действие для браузера (в большинстве случаев) - это загрузка файла. Когда вы сделаете это с изображением, оно откроется на новой вкладке, но вы можете как минимум щелкнуть правой кнопкой мыши и сохранить.

Он работает по телефону window.open на полотнах toDataUrl()

здесь приведен пример использования chartjs

• скрипку: http://jsfiddle.net/leighking2/o0oyjk3z/)
• сниппет:

var data = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [ 
 
     { 
 
      label: "My First dataset", 
 
      fillColor: "rgba(220,220,220,0.2)", 
 
      strokeColor: "rgba(220,220,220,1)", 
 
      pointColor: "rgba(220,220,220,1)", 
 
      pointStrokeColor: "#fff", 
 
      pointHighlightFill: "#fff", 
 
      pointHighlightStroke: "rgba(220,220,220,1)", 
 
      data: [65, 59, 80, 81, 56, 55, 40] 
 
     }, 
 
     { 
 
      label: "My Second dataset", 
 
      fillColor: "rgba(151,187,205,0.2)", 
 
      strokeColor: "rgba(151,187,205,1)", 
 
      pointColor: "rgba(0,0,0,0)", 
 
      pointStrokeColor: "rgba(0,0,0,0)", 
 
      pointHighlightFill: "rgba(0,0,0,0)", 
 
      pointHighlightStroke: "rgba(151,187,205,1)", 
 
      data: [28, 48, 40, 19, 86, 27, 90] 
 
     } 
 
    ] 
 
}; 
 

 

 

 
    var chart_canvas = document.getElementById("canvas").getContext("2d"); 
 
    var line_chart= new Chart(chart_canvas).Line(data); 
 

 
$("button").on("click", function(){ 
 
    window.open(document.getElementById("canvas").toDataURL()); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="chart_container"style="width: 50%"> 
 
    <canvas id="canvas" height="450" width="600"></canvas> 
 
    <button> save </button> 
 
</div>