将图像保存到硬盘驱动器

Save image to hard drive

本文关键字：硬盘驱动器 保存 图像      更新时间：2023-09-26

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

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

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

您实际上可以通过使用 HTML5 下载属性获得所需的效果。

步骤将是：

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

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

所以你几乎可以做到这一点。在我的评论中，我提到了一个创建和下载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>

相关文章：