如何在本地磁盤中保存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');

});