jquery实现下载图片功能


Posted in jQuery onJuly 18, 2019

本文实例为大家分享了jquery实现下载图片的具体代码,供大家参考,具体内容如下

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jquery插件实现悬浮的菜单
Apr 24 jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
jquery图片预览插件实现方法详解
Jul 18 #jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
You might like
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
Angular2实现组件交互的方法分析
2017/12/19 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
基于Python实现天天酷跑功能
2021/01/06 Python
工作人员思想汇报
2014/01/09 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
大学生求职意向书
2015/05/11 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
springcloud整合seata
2022/05/20 Java/Android