javascript - 如何将img src保存到本地磁盘

Question

我在 html 文件中有一个 img 代码：

<span style="display:inline">
        <img NAME="anImage" height="250" src="https://chart.googleapis.com/chart?" alt="">
       </span>

在上面，<img>网页中显示了一个，现在我想添加一个按钮，当单击该按钮时，会弹出一个系统“另存为”对话框，然后将此 img 保存到本地磁盘。

   <input id="saveImage" type="button" value="save image"></input>
   <script type="text/javascript">
    .............
   </script>

我怎样才能做到这一点？

Answer 1

你想要的是图像的默认浏览器行为。如果你想要一个额外的按钮，你可以触发图像的上下文菜单事件：

给你的图片一个 id，让它与原生 javascript 一起工作！

var ev
  , image = document.getElementById('your-image-id')
  , button = document.getElementById('saveImage');

button.onclick = function () {
  if (document.createEvent) { // means this is no ie-browser
    ev = document.createEvent('HTMLEvents');
    ev.initEvent('contextmenu', true, false);
    image.dispatchEvent(ev);
  } else {
    image.fireEvent('oncontextmenu');
  }
};

Answer 2

此代码允许用户单击 ID 为 saveImage 的按钮以下载文件 example.jpg

$('#saveImage').click(function() {

window.location.assign('http://localhost/example.jpg');

});