javascript - 将图像保存到硬盘

标签 javascript html image-processing

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

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

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

最佳答案

使用HTML5 download attribute实际上可以得到您想要的效果.

步骤是:

  1. 使用 Canvas 创建图像
  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();

你可以看到它在 fiddle 上工作:http://jsfiddle.net/wLd4yf7k/1/

关于javascript - 将图像保存到硬盘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29033854/

相关文章:

javascript - 填充具有 javascript 变量的 HTML 表,然后将该 HTML 变量作为预输入结果返回

javascript - 本地视频无法加载 - Webpack

javascript - 为什么在 JavaScript 中 === 比 == 快?

javascript - 使用 jquery 进行页面转换

jquery - Bootstrap 轮播完全显示浏览器窗口的右侧

html - 使用 nth-of-type 按类选择元素

algorithm - 特殊 Blob 填充算法的名称

image-processing - 自适应阈值二值化 : post-processing for removing ghost objects

python - python中的OpenCV轮廓最小尺寸位置

javascript - 使用 Javascript 在黑莓设备上播放视频