將圖像保存到硬盤驅動器

Question

我使用圖像將圖片加載到畫布上。
然後我想讓我的用戶選擇將圖像保存到他們的硬盤上。

我周圍搜索，有很多方法可以做到這一點，如果我使用Ajax和從我的服務器檢索。

有沒有一種方法，以避免任何車次到我的服務器，並直接或者通過圖像控件或畫布控制

Answer 1

您實際上可以通過使用HTML5 download attribute來獲得所需的效果。

的步驟將是：

1. 與畫布創建圖像
2. 追加一個無形的鏈路與download屬性
3. 觸發鏈接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在小提琴上操作：http://jsfiddle.net/wLd4yf7k/1/

Answer 2

所以你幾乎可以做到這一點保存到我的硬盤驅動器。在我的評論中，我提到了創建和下載PDF文件的PDF生成器。這是有效的，因爲當打開PDF文件時，瀏覽器的自動操作（大多數情況下）是下載文件。當您使用圖片進行此操作時，它將在新標籤中打開，但您至少可以右鍵單擊並保存。

它可以通過調用畫布toDataUrl()

這裏window.open是使用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>