Question

我使用图像将图片加载到画布上然后，我希望能够让我的用户选择将图像保存到硬盘中。

我已经四处寻找，如果我使用Ajax并从我的服务器检索，有很多方法可以做到这一点。

有没有办法避免任何访问我的服务器并通过图像控件或画布控件直接保存到我的硬盘上

Answer 1

您可以使用HTML5 download attribute实际获得所需的效果。

步骤如下：

使用画布创建图像
使用download属性
触发链接onclick event
删除隐藏链接

这样的事情：

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();

你可以看到它在小提琴上工作：http://jsfiddle.net/wLd4yf7k/1/

Answer 2

所以你几乎可以做到这一点。在我的评论中，我提到了一个创建和下载pdf文件的pdf生成器。这是有效的，因为在打开pdf文件时，浏览器的自动操作（在大多数情况下）是下载文件。使用图像执行此操作时，它将在新选项卡中打开，但您至少可以右键单击并保存。

通过在画布window.open

上调用toDataUrl()来工作

这是一个使用chartjs的例子

小提琴：http://jsfiddle.net/leighking2/o0oyjk3z/）
摘录：

＆＃13;

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()); 
});

＆＃13;

<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>

＆＃13;

将图像保存到硬盘

2 个答案: