将图像保存到硬盘

Question

我使用图像将图片加载到 canvas。
然后我希望我的用户可以选择将图像保存到他们的硬盘。

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

有没有办法避免访问我的服务器并通过图像控件或 canvas 控件直接保存到我的硬盘驱动器

Answer 1

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

它通过在画布上调用 window.open 来工作 toDataUrl()

这里是一个使用 chartjs 的例子

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

Answer 2

你实际上可以通过使用 HTML5 download attribute.

来获得你想要的效果

步骤为：

使用 canvas
使用 download 属性附加一个不可见的 link
触发linkonclick事件
去掉隐藏的link

像这样：

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

您可以看到它在 fiddle 上运行：http://jsfiddle.net/wLd4yf7k/1/

将图像保存到硬盘

Save image to hard drive

html

javascript

image-processing