jquery实现下载图片

jQuery代码
来源：站三界导航
145阅读
2022-09-27

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
    </style>
</head>

<body>
	<div class="box">
		<div class="card">
			<img id="testimg1" src="./img/a.jpg"/>
			<a href="javascript:;" class="down_btn_a">点击下载</a>
		</div>
	</div>

	
    <script>
	//判断是否为Trident内核浏览器(IE等)函数
	function browserIsIe() {
	    if (!!window.ActiveXObject || "ActiveXObject" in window){
	        return true;
	    }
	    else{
	        return false;
	    }
	}
	//创建iframe并赋值的函数,传入参数为图片的src属性值.
	function createIframe(imgSrc) {
	    //如果隐藏的iframe不存在则创建
	    if ($("#IframeReportImg").length === 0){
	        $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
	    }
	    //iframe的src属性如不指向图片地址,则手动修改,加载图片
	    if ($('#IframeReportImg').attr("src") != imgSrc) {
	        $('#IframeReportImg').attr("src",imgSrc);
	    } else {
	        //如指向图片地址,直接调用下载方法
	        downloadImg();
	    }
	}
	//下载图片的函数
	function downloadImg() {
		//iframe的src属性不为空,调用execCommand(),保存图片
	    if ($('#IframeReportImg').src != "about:blank") {
	        window.frames["IframeReportImg"].document.execCommand("SaveAs");
	    }
	}
	//接下来进行事件绑定
		var aBtn = $(".card .down_btn_a");
	if (browserIsIe()) {
		//是ie等,绑定事件
	    aBtn.on("click", function() {
	    	var imgSrc = $(this).siblings("img").attr("src");
	    	//调用创建iframe的函数
	        createIframe(imgSrc);
	    });
	} else {
		aBtn.each(function(i,v){
			//支持download,添加属性.
			var imgSrc = $(v).siblings("img").attr("src");
			$(v).attr("download",imgSrc);
			$(v).attr("href",imgSrc);
		})
	}
    </script>
</body>

</html>

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/10525.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇： jQuery动态添加script标签

下一篇： jQuery—绑定事件的四种方式