使用js下载图片到本地

如何使用js下载图片

使用js代码将图片下载到本地,当前主流游览器均有效

html代码

	<div class="card">
		<img id="testimg" src="123.png>"/>
		<a href="javascript:;" class="layui-btn  down_btn_a">点击下载</a>
	</div>

css代码

	*{
		padding: 0;
		margin: 0;
	}
	img {
		display: block;
		width: 500px;
	}
	.card{
		width: 600px;
		margin: 15px auto;
		text-align: center;
	}
	.card img{
		width: 100%;
		display: block;
	}

js代码

//判断是否为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" οnlοad="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,添加属性.
			console.log(v)
			var imgSrc = $(v).siblings("img").attr("src");
			$(v).attr("download",imgSrc);
			$(v).attr("href",imgSrc);
		})
	}