创建一个链接以下载当前显示在div上的图像

时间:2014-08-14 18:20:31

标签: javascript jquery html image download

我正在开发一个显示在Windows应用程序中的脱机HTML框。

该应用程序(在Autoplay Media Studio中创建)显示了一个用于加载html的iexplore框。我在应用程序首次加载之前编写了Iexplore 11静默安装脚本。

我正在使用Jquery Fullsizable(https://github.com/MSchmidt/jquery-fullsizable)以“全屏”(框内全屏)显示图像。

由于Fullsizable是一个灯箱,您可以使用下一个和上一个按钮更改图像,因此图像src路径会发生变化。这就是我需要一个代码来提取当前img src文件路径的原因,当您单击链接/按钮并下载它时,询问磁盘上将保存图像的位置。

这是容器结构图像

<div id="fullsized_image_holder" style="display: table-cell;"><img src="foto11.jpg" style="margin-top: 0px;"></div>

创建链接以下载当前显示在div上的图像的最佳方法是什么?

我认为使用JS可能有一种简单的方法,例如<a href=the SRC of the <img> that's inside the #fullsized_image_holder DIV download="actualfilename">

离线环境中的所有这些。

1 个答案:

答案 0 :(得分:0)

嗯,非常感谢Quora的Vladislav Zorov为解决方案付出了很多努力。

<a href="#" onclick="this.href = $('#fullsized_image_holder img:first').attr('src');"
download>Click here to download image</a>

这是使用Jquery的解决方案(实际上我正在使用Jquery)

现在,就像Iexplorer一样,我必须强制浏览器提示用户将保存图像的位置。

有一个解决方案:

document.execCommand('SaveAs','true','http://www.google.com'),但我需要在“http://www.google.com

的位置插入this.href = $('#fullsized_image_holder img:first').attr('src');