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

});

如何在本地磁盘中保存img src

2 个答案: